Блог

Я пытаюсь выполнить итерацию по состоянию persons и вернуть несколько пользователей через компонент, но я продолжаю получать ошибку Uncaught: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {allPeople}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив. Это работает, если я помещаю функцию map непосредственно в возвращаемый файл, но не так, где я сначала сохраняю его в переменной, а затем вводю переменную в возвращаемый файл, спасибо

  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;
 

Проблема в том, что вы возвращаете объект в этой строке:

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

В этом случае {allPeople} это то же самое, что {allPeople: allPeople}

Это может быть {this.state.click === false ? null : allPeople}