Javascript React useState无法更新双向绑定

我正在尝试设置，以便当我在Person组件的输入中键入一个名称时，应用程序组件中的状态会更新，进而更新个人道具的值，尽管状态似乎发生了变化，但道具没有更新，有人能帮我找出问题所在吗

应用程序

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-App=（）=>{
const[persons，setPersons]=使用状态([
{id:“key1”，姓名：“Daniel”，年龄：“28”}，
{id:“key2”，姓名：“John”，年龄：“30”}，
{id:“key3”，姓名：“Doe”，年龄：“60”}
]);
const nameChangedHandler=（id，event）=>{
日志（event.target.value）；
console.log（id）；
const personIndex=persons.findIndex（p=>{
返回p.id==id；
});
const person={
…个人[个人索引]
};
person.name=event.target.value；
const pers=[…人]；
人员[人员索引]=人员；
设置人员（PER）；
控制台日志（人）；
};
让人=人。地图（（人，索引）=>{
返回(
);
});
返回{人}；
};

人

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>
);

const person=props=>(

我是{props.name}，我是{props.age}！

);

如果分配给错误的变量，请尝试以下操作：

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

它应该像预期的那样工作。由于您正在更新状态对象

而不是克隆的用于设置状态的对象

，因此控制台日志显示了预期的输出，但您的状态没有正确更新

检查此工作
老实说，我会使用一个简单的
map
函数来更改特定人员的姓名

内部
nameChangedHandler
功能：

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

然后更新本地状态

setPersons(updatedPersons);

它应该按预期工作。
FWIW，OP也可以通过在
Person
中使用
onChange={e=>changed（id，e）}
摆脱
bind
（其中
changed
是解构属性）。例如，然后只需使用
changed={nameChangedHandler}
。但要做到这一点，他们必须将
id
传递给
Person
（而不仅仅是将
id
用作
键）