React State не обновляет

Question

import React from 'react'

class Help extends React.Component{
  constructor(props){
    super(props);
    this.state={
      friend:[
        {
          name:"ashwani",
          id:"1",
          friend:[
            {
              name:"mayank",
              id:"2",
              friend:[
                {
                  name:"prakhar",
                  id:"3",
                  friend:[]
                }
              ]
            },
            {
              name:"anand",
              id:"4",
              friend:[]
            },
            {
              name:"manish",
              id:"5",
              friend:[]
            }
          ]
        }
      ]
    }
  }

  render(){
    return (
      <div>
        {this.state.friend.map((item, index) => <Item key={index} {...item} />)}
      </div>
    )
  }
}
class Item extends React.Component {
  addFriend(friend){
    friend.push({name:"GOD",friend:[]});
    console.log(friend);
  }
  render() {
    const { name, friend } = this.props;
    return (
      <div>
        <div>{name}</div>
        <div style={{margin: '5px 25px'}}>
          <button type="button" onClick={()=>this.addFriend(friend)}>add friend</button>
     strong text
          {friend && friend.map((item, index) => <Item key={index} {...item} />)}
        </div>
      </div>
    )
  }
}
export default Help; 

Состояние реакции не обновляется. Я знаю, что сделал неправильно, но понятия не имею, как это сделать, поэтому я пытаюсь использовать их кнопку, которая добавит друга во вложенный массив друзей, который Когда друг требовал другого друга, этот друг - Бог, его можно добавлять столько раз, сколько вы нажимаете кнопку, кнопка - для каждого присутствующего массива друзей, чтобы они не чувствовали себя одинокими и могли добавлять друзей в любое время, это просто сценарий использования. в моем проекте, поэтому, любая помощь будет принята с благодарностью

Answer 1

Хранение вашего состояния таким образом делает его довольно сложным, но должно быть возможно заставить его работать. Ваша проблема в том, что вы пытаетесь изменить состояние, которое не разрешено в React. Чтобы обновить состояние, вы должны использовать this.setState, и в вашем случае вам понадобится какой-нибудь дополнительный сложный код:

import React from 'react'

class Help extends React.Component{
  constructor(props){
    super(props);
    this.state={
      friend:[
        {
          name:"ashwani",
          id:"1",
          friend:[
            {
              name:"mayank",
              id:"2",
              friend:[
                {
                  name:"prakhar",
                  id:"3",
                  friend:[]
                }
              ]
            },
            {
              name:"anand",
              id:"4",
              friend:[]
            },
            {
              name:"manish",
              id:"5",
              friend:[]
            }
          ]
        }
      ]
    }
  }

  updateFriends = (friendIndex) => (newFriendValue) => {
    this.setState(prevFriends => {
      let newFriends = Array.from(prevFriends);
      newFriends[friendIndex] = newFriendValue;

      return { friend: newFriends };
    })
  }

  render(){
    return (
      <div>
        {this.state.friend.map((item, index) => <Item key={index} {...item} updateFriends={this.updateFriends(index)} />)}
      </div>
    )
  }
}
class Item extends React.Component {
  addFriend(friend){
    let newFriends = [...this.props.friend, {name:"GOD",friend:[]}];

    this.props.updateFriends({ name: this.props.name, friend: newFriends })
  }

  updateFriends = (friendIndex) => (newFriendValue) => {
    let newFriends = Array.from(this.props.friend);
    newFriends[friendIndex] = newFriendValue;

    this.props.updateFriends({ name: this.props.name, friend: newFriends })
  }

  render() {
    const { name, friend } = this.props;
    return (
      <div>
        <div>{name}</div>
        <div style={{margin: '5px 25px'}}>
          <button type="button" onClick={()=>this.addFriend(friend)}>add friend</button>
     strong text
          {friend && friend.map((item, index) => <Item key={index} {...item} updateFriends={this.updateFriends(index)} />)}
        </div>
      </div>
    )
  }
}

export default Help; 

Не стесняйтесь спрашивать любые разъяснения!

Answer 2

Состояние не обновляется, потому что вы не звоните this.setState();, чтобы установить друзей в родительском.