React：.map不是一个函数。

Question

我对React还比较新，大部分学习都是通过观看教程实现的。所以在这个阶段，我跟着我的教练走了一段路，然后根据自己的理解开始实现。但是在此过程中，我遇到了以下错误：

React：.map不是一个函数

下面是代码：

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 (

实现eventSwitchHandler后出现了错误，这是我的开关处理程序代码。

eventSwitchHandler = (event, id) => {

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

  function checkID (passedID) {
     return passedID.id === id
    }
    console.log("newP")
    const newP = {...personInput}
    console.log(newP)
    newP.name = event.target.value
    console.log(personInput)
    this.setState ({person: newP})
  }

[更新] 这是状态

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
}

[更新] 这是我的教练代码，他的名称更改处理程序等于我的事件切换处理程序。 再次说明，我的第一个问题是为什么会出现“.map不是函数”的错误，并且在控制台记录信息时，我观察到了一些对我来说很罕见的东西，我已经附上了屏幕截图（为什么名称在两个地方看起来不同？）

- user9504869

---

人是一个对象，而不是一个数组，我猜这就是为什么“map”方法不起作用的原因。你可能会发现这个链接有用：https://dev59.com/mWUq5IYBdhLWcg3wEcbu 尽管截图上的错误非常奇怪。 - Dmitry Gamolin

Person是一个数组，我刚刚更新了我的问题。在使用eventSwitchHandler之前一切都运行正常。 - user9504869

Answer 1

使用.map方法迭代对象，利用Object.keys()获取给定对象的数组：

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. ****
}

- Carr

---

Person是一个数组，刚刚更新了我的问题。一切都很好，直到我使用了eventSwitchHandler。 - user9504869

@RahulPatel，我们找到了问题。 - Carr

Answer 2

你的对象似乎是一个 JavaScript 对象，而不是提供 map 函数的数组。

你可以在这里查看其它详细信息： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map。

- Gerik

---

人是一个数组，我刚刚更新了我的问题。在使用eventSwitchHandler之前，一切都运行得很好。 - user9504869

不，人看起来不像一个对象。请注意person和persons之间的声明差异。 - Gerik

Answer 3

您在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)
            ]
       })
    ) 
}

或者

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

- Shubham Khatri

---

Shubham，这很有帮助，但我很想知道如何使用ID来实现它？由于元素的索引会改变，但ID不会。 - user9504869

@RahulPatel，我们是根据ID查找索引，对吗？ - Shubham Khatri

Answer 4

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

- Mohammad Vahedi