Question

所以我很新做出反应，而且我的大部分学习都是通过观看教程来实现的。所以在这一点上，我转移了我的导师并开始用我自己的理解实现它然后我被抛出了以下错误

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
}

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

再一次，我的第一个问题是为什么会发生.map is not a function错误，而在控制台.logging的东西，我观察到一些对我来说很少见的东西，我附上了截图（为什么这个名字似乎是这两个地方都有所不同吗？）

Answer 1

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

您可以在此处查看文档中的其余详细信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

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

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

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

React：.map不是函数

4 个答案: