Question

我有一个react组件，应该映射一个'persons'状态并返回一个'person'列表，它显示列表很好，并且deletePersonHandler仍然有效，但是当我开始输入一个输入时，它会抛出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>
      );       
    }

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

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

非常感谢！

Answer 1

这是因为人是对象。 .map是数组独有的函数代替props.persons.map尝试类似Object.keys(props.persons).map

Object.keys()的

doc在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

希望有帮助（：

Answer 2

您正在将persons设置为一个对象。从代码中，我只能得出结论，persons最初是一个数组（因为您可以在其上调用find）。您可以将nameChangeHandler更改为

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;
  // Notice the change here
  const newPersons = [...this.state.persons].splice(personIndex, 1, person);
  this.setState({ persons: newPersons });
};

我使用Array#splice替换旧的person并生成一个新数组。

为什么这会引发TypeError？

2 个答案: