Javascript 反应：。映射不是函数

所以我是一个新手，我的大部分学习都是通过观看教程来完成的，所以在这一点上，我从我的导师那里转移了注意力，开始用我自己的理解来实现它，然后我就犯了以下错误

反应：。映射不是函数

这是密码

render() {

    let person = null;

    if (this.state.showPerson) {
      person= (
        <div>
          {
            this.state.person.map((el, index) => {
              return <Person
              key={el.id}
              click={this.deletePersonHandler.bind(index)}
              name={el.name}
              age={el.age}
              changed={(event) => this.eventSwitchHandler(event, el.id)} />
            })
          }
       </div>
     );
    }
    return (

[更新]这里是状态

state = {
    person: [
    {id: "name1n", name: "Rohit", age: 24},
    {id: "name2l", name: "Hariom", age: 23},
    {id: "name3g", name: "Vaibhav", age: 58}
  ],
  someOtherState: "Untouched state",
  showPerson: false
}

[更新]这是我的讲师代码，他的姓名更改处理程序等于我的eventSwitchHandler

再一次，我的第一个问题是为什么

.map不是一个函数

会发生错误，在console.logging的时候，我观察到了一些对我来说很少见的东西，我附上了一个屏幕截图（为什么两个地方的名称看起来不一样？

---

您的人似乎是一个javascript对象，而不是提供映射功能的数组

您可以在此处查看文档中的其他详细信息：

---

通过

.map

方法迭代对象，使用返回给定对象键的数组的方法：

Object.keys(this.state.person).map((key, index) => {
    console.log(this.state.person[key]);
})

更新

您对讲师代码做了不同的操作：

eventSwitchHandler = (event, id) => {
    const personInput = this.state.person.find(checkID);

    function checkID (passedID) {
       return passedID.id === id
    }

    const newP = {...personInput}   // **** newP is an object. ****
    newP.name = event.target.value
    // What you missed:
    // let person = this.state.person;
    // person[personInput] = newP;
    // this.setState ({person: person});

    this.setState ({person: newP})  // **** now person becomes object, not an array any more. ****
}

---

您没有在

eventSwitchHandler

eventSwitchHandler = (event, id) => {

  const personInput = this.state.person.find(checkID);

    function checkID (passedID) {
     return passedID.id === id
    }
    console.log("newP")
    const newP = {...personInput}  // newP is an object here
    console.log(newP)
    newP.name = event.target.value
    console.log(personInput)
    this.setState ({person: newP}) // overwriting person array with object
}

你会把它改成

eventSwitchHandler = (event, id) => {
    const personInputIndex = this.state.person.findIndex(checkID);

    function checkID (passedID) {
     return passedID.id === id
    }
    const newName = event.target.value
    this.setState (prevState => ({
            person: [
                ...prevState.person.slice(0, personInputIndex), 
                {...prevState.person[personInputIndex], name: newName},
                ...prevState.person.slice(personInputIndex)
            ]
       })
    ) 
}

或

---

Person是一个对象，而不是数组，我想这就是

map

方法不起作用的原因。你可能会发现这很有用：截图上的错误真的很奇怪。人是一个数组，刚刚更新了我的问题。在我使用eventSwitchHandlerPerson是一个数组之前，一切都正常运行，只是更新了我的问题。在我使用EventSwitchHandler之前，一切都很顺利。不，人看起来像个物体。注意person和person之间的声明差异。person是一个数组，刚刚更新了我的问题。在我使用之前，一切都很好eventSwitchHandler@RahulPatel，我们发现了问题。Shubham，这很有帮助，但我很想知道如何使用ID来实现它？因为元素的索引改变了，但ID没有改变。@RahulPatel，我们是根据ID来寻找索引的，对吗？

eventSwitchHandler = (event, id) => {
    const personInputIndex = this.state.person.findIndex(checkID);

    function checkID (passedID) {
     return passedID.id === id
    }
    const newName = event.target.value
    this.setState (prevState => ({
            person: [
                ...prevState.person.slice(0, personInputIndex), 
                {...prevState.person[personInputIndex], name: newName},
                ...prevState.person.slice(personInputIndex)
            ]
       })
    ) 
}

eventSwitchHandler = (event, id) => {
    const personInputIndex = this.state.person.findIndex(checkID);

    function checkID (passedID) {
     return passedID.id === id
    }
    const newName = event.target.value
    this.setState (prevState => ({
            person: Object.assign([], prevState.person, {
               [personInputIndex]: {...prevState.person[personInputIndex], newName
            }})
       })
    ) 
}

    eventSwitchHandler = (event, id) => {

  const personInput = this.state.person.findIndex(checkID);

  function checkID (passedID) {
     return passedID.id === id;
    }
    const person = {...this.state.person[personInput]};
    person.name = e.target.value;
    const newPerson =[...this.state.person];
    newPerson[personInput] = person;
    this.setState ({person: newPerson})
  }