时间戳

首页 > 解决方案 > 为什么这会引发 TypeError？

reactjs - 为什么这会引发 TypeError？

问题描述

我有一个应该映射“人员”状态并返回“人员”列表的反应组件，它可以很好地显示列表，并且 deletePersonH​​andler 仍然有效，但是当我开始输入输入时，它会引发 TypeError。

TypeError：props.persons.map 不是函数

我对 JS 很陌生，对 React 也很陌生，所以任何指针都将不胜感激！

我的人员组件：

const persons = (props) =>  
  props.persons.map((person, index) => {
        return (
          <Person 
          click={() => props.clicked(index)}
          name={person.name}
          age={person.age}
          //each item in a list needs a key, should be unique and unchanging
          key={person.id}
          changed={(event) => props.changed(event, person.id)} />
          )
      });

然后在 App.js 我有

let people = null;

    if (this.state.showPersons) {
      people = (
        <div>
          <Persons 
            persons = {this.state.persons}
            clicked = {this.deletePersonHandler}
            changed = {this.nameChangedHandler} 
            />     
        </div>
      );       
    }

最后，我的 nameChangedHandler 也在 App.js 中

nameChangedHandler = (event, id) => {
        const personIndex = this.state.persons.find(p => {
      return p.id === id;
    });
    const person = {...this.state.persons[personIndex]};
    person.name = event.target.value;
    person[personIndex] = person; 
    this.setState({ persons: person });
  }

我希望名称在您键入时会更改，但是一旦您开始键入，就会抛出 typeerror

非常感谢！

标签： reactjstypeerror

解决方案

这是因为人是一个对象。并且 .map 是数组独有的函数，而不是props.persons.map尝试类似Object.keys(props.persons).map

文档在Object.keys()这里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

希望有所帮助（：

推荐阅读