Question

我无法更新状态。我正在使用redux，因此状态在reducer级别上进行了更新。从另一个组件更新状态后，将使用新数据返回新状态。 mapStateToProps被调用，但是该组件未重新呈现。

这是我的组成部分


class Users extends Component {

    render() {
        console.log("RENDERING ------");
        const usernames= this.props.usernames.map((username, key) => {
            return (<div key={key} className="card mt-2">
                <div className="card-body">
                    {username}
                </div>
            </div>)

        })

        return (
            <div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
                {usernames}
            </div>

        )

    }

}


const mapStateToProps = state => {
    console.log("STATE", state);
    return {
        usernames: state.usernames.data
    }
}


export default connect(mapStateToProps, null)(Users);

在加载组件时，将显示用户名。但是会从另一个组件中添加新的用户名，即会调用mapStateToProps，但不会重新呈现该组件。

父组件

class Parent extends Component {

    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col">
                        <Editor />
                    </div>
                    <div className="col">
                        <Users />
                    </div>
                </div>

            </div>
        )
    }

这是我要在其中分派动作的编辑器组件


class Editor extends Component {

    state = {
        user: ""
    }

    handleChange = event => {
        this.setState({ user: event.target.value });
    }

    onSubmit = e => {
        e.preventDefault();
        this.props.addUser(this.state.user);
    }

    render() {
        return (
            <form onSubmit={this.onSubmit}>
                <div className="form-group">
                    <label htmlFor="exampleFormControlTextarea1">User</label>
                    <textarea className="form-control" id="exampleFormControlTextarea1" rows="3" value={this.state.user} onChange={this.handleChange} ></textarea>
                </div>
                <button type="submit" className="btn btn-primary mb-2">Submit</button>

            </form>
        )
    }
}

const mapDispatchToProps = dispatch => {
    return {
        addUser: (user) =>
            dispatch(addUser(user))
    }
}

export default connect(null, mapDispatchToProps)(Editor);

Answer 1

您正在usernames中映射mapStateToProps道具，但未在组件中使用它。实际上，您正在创建一个名为usernames的新变量，并将其分配给map上的this.props.messages的结果。

如果我不理解您要做什么，请原谅我，但是您似乎应该只使用this.props.usernames，然后通过dispatch更新它时，道具将更新，然后组件将重新渲染。

Answer 2

尝试并在线搜索后。我发现问题是，如果mapStateToProps返回的值与上次调用的值不同，则重新渲染组件。就我而言，我以一种可变的方式处理自己的状态。我正在使用推将新用户添加到减速器上的状态。解决方案是使用concat以不变的方式进行操作：


const us = [];
us.push(action.results.user);
return { ...state, users: state.users.concat(us) };

更新状态后未重新渲染组件（调用了mapStateToProps）

2 个答案: