javascript - 在 React 中更改状态后组件不会重新渲染

Question

我面临一个问题。每当我单击激活或停用按钮时，状态 (statusUpdated) 都会更新，但组件不会重新呈现。有人可以告诉我我在这里做错了什么并帮助我解决这个问题。

在 ComponentDidMount 上，我调用 api 来获取用户列表，然后在数组中存储一些数据。我想通过单击按钮来激活或停用用户。当用户单击任何按钮时，都会调用相应的函数。在相应的函数中，我再次调用了 api ，之后我正在更新状态，该状态正在更新但组件没有重新渲染。

请帮我解决问题。谢谢你。

constructor(props) {
        super(props);

        this.state = {
            usersList       : [],       
            buttonClicked   : false,
        };

        this.DeactivateUser = this.DeactivateUser.bind (this);
        this.ActivateUser = this.ActivateUser.bind (this);
    }

    componentDidMount () {
        var usersList = [];
        apiCallHere ()
        .then ((response) => response.json ())
        .then ((findresponse) => {
            findresponse
            .sort ((x, y) => y.id - x.id)
            .map ((obj) => {
                usersList.push ({
                    Id      : obj.id,
                    Status  : obj.state === 'A' ? <button onClick={(e) => this.DeactivateUser(obj.id)}>Deactivate</button> : <button onClick={(e) => this.ActivateUser(obj.id)} >Activate</button>,
                })          
            })

            this.setState ({ usersList: usersList})
        })
    }

    ActivateUser = (id) => {
        apiCalled (id)
        .then ((response) => response.json ())
        .catch ((error) => {
            this.setState ({statusUpdated : true})
        })
    }

    DeactivateUser = (id) => {
        apiCalled (id)
        .then ((response) => response.json ())
        .catch ((error) => {
            this.setState ({statusUpdated : true})
        })
    }

    render () {
        return (
            <div> {this.state.usersList.map ((obj) => {
                      <li>obj</li>
                  })}
            </div>
        )
    }

标签： javascriptreactjs