Установка состояния внутри обработчика событий, который находится внутри свойств состояния

Question

У меня проблема с обновлением состояния из события, которое находится внутри этого состояния. Я имею в виду, что у меня есть динамическая форма c, и эта должна иметь событие внутри их свойств. Я кодировал небольшой компонент с моей проблемой, код в URL https://codesandbox.io/s/material-demo-4wsib

Answer 1

Проблема в том, что вы храните компонент с обработчиком щелчков в состоянии. Как правило, вы должны хранить только минимальные данные, необходимые в состоянии. Это также облегчит вашу логику c, поскольку вам не нужно синхронизировать компонент в вашем состоянии. При использовании React вы должны описать, как должен выглядеть ваш пользовательский интерфейс в зависимости от состояния:

https://codesandbox.io/s/material-demo-vv3qw

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import Visibility from "@material-ui/icons/Visibility";

export default function IconButtons() {
  const [person, setPerson] = React.useState({
    age: 25,
    isTall: false,
    name: "Ana"
  });

  return (
    <div>
      <span>{person.isTall ? "TRUE" : "FALSE"}</span>
      <IconButton
        onClick={() => {
          setPerson({
            ...person,
            isTall: !person.isTall
          });
        }}
      >
        {person.isTall ? <DeleteIcon /> : <Visibility />}
      </IconButton>
    </div>
  );
}