Question

下面的代码是 ReactJS 中的双向绑定，而一种类型是文本和输入值同时更新。

这是Component循环：

if (this.state.personState){

  persons = (

    <div> 

      {this.state.person.map( (person, index) =>{
          return 
             <Person 
                click = {()=>this.deletePerson(index)}
                name = {person.name} 
                age = {person.age} 
                key = {person.id} 
                changed = { (event)=>this.changeNameHandler(event, person.id)} >
             </Person>
      })}

    </div>

)

处理事件的功能

changeNameHandler = (event, id) => {

   const personIndex = this.state.person.findIndex(person => person === id)

   // making a copy and not manipulating the original reference
   const personcpy = { ...this.state.person[personIndex] }

   // assign the value of the event target
   personcpy.name = event.target.value;

   // making a copy of the state to update the dom
   const persons = [...this.state.person]

   // updating...
   persons[personIndex] = personcpy

   // state update
   this.setState({ persons : persons })

}

JavaScript对象本身

state = {
  person : [
    {id:'12121', name:"Jimmy", age:12},
    {id:'121s', name:"Jack", age:15},
    {id:'23232a', name:"pouya", age:27}
  ]
}

组件代码

const Person = (props) => {
    return (
        <div className="Person" >
        <p  onClick={props.click}>I'm {props.name} and I'm {props.age} years old</p>
        <input  onChange={props.changed} value={props.name} />
        <h1 >{props.name}</h1>
        </div>
    )
}

我知道 findIndex（）返回满足给定测试的数组中第一个元素的索引。

我正在测试更改事件的索引是否与对象之一相同！

但是，这不起作用，当我尝试键入时只会冻结

我已经检查了Chrom的开发人员工具，并尝试在那里进行调试，似乎存在参考错误！但是我不明白！怎么可能？

请帮助我从不同的角度来看。

Answer 1

似乎this.state.person的引用未更改，组件将不会重新呈现。在changeNameHandler中尝试以下操作：

// ...ellipsis code ...

this.setState({ person: [...persons] })

在您的状态下，声明了person，但是在persons中更新了setState，那是未命中类型吗？

Answer 2

您获得了有效的personIndex吗？也许你应该写findIndex（person => person.id === id）

通过eventHandler更新状态

2 个答案: