反应状态未更新

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; 

反应状态没有更新，我知道我做错了方法，但是我不知道该怎么做，所以我正在尝试的是他们的is按钮，它将在嵌套好友数组中添加好友所需的好友另一个朋友，朋友是上帝，您可以在单击按钮时添加多次，按钮用于存在的每个朋友数组，这样他们就不会感到孤独，可以随时随地添加朋友，这只是我项目中的一个用例因此，将不胜感激任何帮助

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();来设置父级中的朋友。