Question

我正在尝试进行设置，以便当我在Person组件的输入中键入名称时，App组件中的状态会被更新，并依次更新Person中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

Answer 2

说实话，我将使用一个简单的{{$notification->type}}函数来更改特定人员的姓名。

内部map函数：

nameChangedHandler

然后更新本地状态

const updatedPersons = persons
   .map((person) => person.id === id ? {...person, name: event.target.value} : person);

它应该可以正常工作。

反应useState无法更新双向绑定

2 个答案: