Map 方法不断返回一个对象数组，导致 React 出错

Question

我正在尝试遍历人员状态并通过一个组件返回多个人员，但我不断收到未捕获的错误：对象作为 React 子项无效（找到：带有键 {allPeople} 的对象）。如果您打算渲染一组子项，请改用数组。如果我将 map 函数直接放在 return 中，但不是这样，我先将它存储在一个变量中，然后在 return 中输入变量，谢谢

 class App extends Component {
  
  state = ({
    persons: [
      {
        name: "John",
        age: 26,
        id: 1
      },
      {
        name: "Kim",
        age: 29,
        id: 2
      },
      {
        name: "Dave",
        age: 59,
        id: 3
      }
    ],
    newName: '',
    click: false
  })

  handlePeople = (e, id) => {

    this.setState({newName: e.target.value});
  }

  handleBtn = () => {
    this.setState({click: !this.state.click})
  }

  handleDelete = (e) => {
    console.log(e)
    
  }

    render() {
    let allPeople = null;
    allPeople = ( 
      <div>
          {this.state.persons.map((person, index) => {
            console.log(typeof person.name)
                 return <NameBox
                   key={person.id}
                   clickDel={() => this.handleDelete(index)}
                   name={person.name}
                   age={person.age}
                   changed={(e) => this.handlePeople(e, person.id)}
                   />
          })}
      </div>
    )
    console.log(allPeople)
    return (
      <div className="App">
        <h1>Person Manager</h1>
        <p>This is really working</p>
        <ClickBtn toggle={this.handleBtn} color={this.state.click}/>
        {this.state.click === false ? null : {allPeople}}
      </div>
    );
  }
  
}

export default App;

Answer 1

问题是你在这一行返回一个对象：

{this.state.click === false ? null : {allPeople}}

在这种情况下，{allPeople} 与 {allPeople: allPeople} 相同

可能是{this.state.click === false ? null : allPeople}