Reactjs setState未更新对象数组'；s值

我正在尝试使用以下函数更新对象数组，即

users

内部

users

组件：

  updateUser = (index, user) => {
    let temp = this.state.users;
    temp[index] = user;
    this.setState({users: temp});
    console.log(this.state.users);
    console.log(temp);
  }        

这样做会给我以下警告：

js:56警告：setState（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是禁止操作。请检查用户组件的代码

日志输出如下：

请注意：

• 此函数从另一个组件调用，以从用户数组更新单个用户。但是值并没有持续下去。只要我用另一个/新值调用此函数，旧的更新就不会保留
• 我的目标是在修改阵列后立即重新渲染所有组件。
  编辑1：我有四个部分： 例如，

  Users

  组件正在调用

  List

  它正在调用

  User

  并且正在调用

  UserDetail

用户

组件：

import React, { Component } from 'react';
import List from './list';
import '../App.css';

class Users extends Component {
  constructor(){
    super();
    this.state = {
      users:[
        {firstName: "John", lastName: "Doe", email: "John@mail.com", company: "Monsters Inc."},
        {firstName: "Tom", lastName: "Riddle", email: "Tom@mail.com", company: "Slytherin Inc."},
        {firstName: "Harry", lastName: "Potter", email: "Harry@mail.com", company: "Gryffindor Inc."}
      ],
      adding: false
    }
  }

  updateUser = (index, user) => {
    let temp = this.state.users;
    temp[index] = user;
    this.setState({users: temp});
    console.log(this.state.users);
    console.log(temp);
  }

  render() {
    return (
        <div>
          <button onClick={this.addingMode}>ADD</button>
          <List data={this.state.users} remover={this.remover} updateUser={this.updateUser}/>
        </div>
      );
    }
}

export default Users;

class List extends Component {
  render() {
    return (
      <div style={{textAlign:"Left"}}>
        {this.props.data.map((profile, i) =>
          <User key={i} id={i} data={profile} remover={this.props.remover} updateUser={this.props.updateUser}/>
        )}
      </div>
    );
  }
}

用户

组件：

import React, { Component } from 'react';
import '../App.css';
import UserDetails from './userDetails';
import {withRouter} from 'react-router';

class User extends Component {
  constructor(props){
    super(props);
    this.state = {
      editing: false,
      text: ""
    };
  };

  showUserDetails = () => {
    this.props.history.push({
      pathname: '/details',
      state: { data: this.props.data, id: this.props.id },
      updateUser: this.props.updateUser
    });
  };

  render() {
    return(
    <div>
      <h4>{this.props.data.firstName}</h4>
      <button onClick={this.showUserDetails}>View</button>
      <button>Remove</button>
    </div>
    );
  }
}

export default withRouter(User);          

---

这可能是因为

setState

是异步的。这意味着

console.log（）

就在

setState

给出错误信息之后。使用

setState

的

callback

功能来确定

状态

更改：

this.setState（{users:temp}，（）=>console.log（this.state.users））

您应该分享更多组件，以确定您面临的真正问题。很难说出您真正想做什么，因为您共享的代码片段指向一个异步问题，而您的描述和警告指向另一个问题。
可能重复@edi9999上述问题并不能解决我的问题。也许，您正在尝试设置一个已卸载的用户状态，这意味着您维护用户状态的组件已从您的视图中卸载。请共享其余代码。看到这一点，我没有否决它。但我已经知道setState是异步的。请查看显示更新状态的屏幕截图。@noobie哦，看起来您没有（
console.log（this.state.users）；）
。我无法通过一个屏幕截图确定你的应用程序的工作流程，并假设它显示了旧的
状态
，对此表示抱歉。不过，我无法从更新的代码中看出你做错了什么，对不起。
import React, { Component } from 'react';
import '../App.css';
import User from './user';

class UserDetails extends Component {
  constructor(props){
    super(props);
    this.state = {
      isEditModeEnabled: false,
      firstName: this.props.location.state.data.firstName,
      lastName: this.props.location.state.data.lastName,
      email: this.props.location.state.data.email,
      company: this.props.location.state.data.company
    };
  }

  editButton = () => {
    this.setState({isEditModeEnabled: true});
  }

  updateButton = () => {
    this.setState({isEditModeEnabled: false});
    //console.log(this.props.location);
    this.props.location.updateUser(
      this.props.location.state.id,
      { "firstName": this.state.firstName,
        "lastName": this.state.lastName,
        "email": this.state.email,
        "company": this.state.company
      }
    );
  }

  editing = (event) => {
    if (event.target.name === "firstName") {
      this.setState({firstName: event.target.value});
    } else if (event.target.name === "lastName") {
      this.setState({lastName: event.target.value});
    } else if (event.target.name === "email") {
      this.setState({email: event.target.value});
    } else {
      this.setState({company: event.target.value});
    }
  }

  render() {
    if (this.state.isEditModeEnabled) {
      return (
        <div>
          <b>First Name: </b><textarea defaultValue={this.state.firstName} onChange={this.editing} name="firstName"></textarea><br/>
          <b>Last Name: </b><textarea defaultValue={this.state.lastName} onChange={this.editing} name="lastName"></textarea><br/>
          <b>Email: </b><textarea defaultValue={this.state.email} onChange={this.editing} name="email"></textarea><br/>
          <b>Company: </b><textarea defaultValue={this.state.company} onChange={this.editing} name="company"></textarea><br/>
          <button onClick={this.updateButton}>Update</button>
        </div>
      );
    } else {
      return (
        <div>
          <b>First Name: </b>{this.props.location.state.data.firstName}<br/>
          <b>Last Name: </b>{this.props.location.state.data.lastName}<br/>
          <b>Email: </b>{this.props.location.state.data.email}<br/>
          <b>Company: </b>{this.props.location.state.data.company}<br/>
          <button onClick={this.editButton}>Edit</button>
        </div>
      );
    }
  }
}

export default UserDetails;