javascript - React useState 无法更新双向绑定(bind)

Question

我正在尝试进行设置，以便当我在 Person 组件的输入中键入名称时，App 组件中的状态会更新，进而会更新 Person 中的 prop 值，但状态似乎发生了变化正在发生，但 prop 没有更新，谁能帮我找出问题所在？

应用

const App = () => {
  const [persons, setPersons] = useState([
    {id: "key1", name: "Daniel", age: "28"},
    {id: "key2", name: "John", age: "30"},
    {id: "key3", name: "Doe", age: "60"}
  ]);

  const nameChangedHandler = (id, event) => {
    console.log(event.target.value);
    console.log(id);
    const personIndex = persons.findIndex(p => {
      return p.id === id;
    });

    const person = {
      ...persons[personIndex]
    };

    person.name = event.target.value;

    const pers = [...persons];
    persons[personIndex] = person;

    setPersons(pers);
    console.log(persons);
  };

  let people = persons.map((person, index) => {
    return (
      <Person
        name={person.name}
        key={person.id}
        age={person.age}
        changed={nameChangedHandler.bind(this, person.id)}
      />
    );
  });

  return <div className="App">{people}</div>;
};

人

const person = props => (
  <div className={style.Person}>
    <p onClick={props.click}>
      I'm {props.name}, and I am {props.age}!
    </p>
    <input type="text" onChange={props.changed} value={props.name} />
  </div>
);

Answer 1

您正在分配给错误的变量，请尝试以下操作:

const pers = [...persons];
pers[personIndex] = person;

它应该按预期工作。由于您正在更新您的状态对象 persons 而不是您克隆的对象 pers，您使用它来设置状态，您的控制台日志显示了预期的输出，但您的状态没有正确更新。

检查此工作 stackblitz