反应状态没有更新

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; 

React 状态没有更新我知道我做错了，但我不知道该怎么做，所以我正在尝试的是他们的 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(); 来设置父级中的朋友。