React.js setState 不重新渲染子组件

Question

我正在将一个列表从父组件的 state 传递到子组件的 <CheckboxList /> props。然后该列表应显示在子组件中。从数据库中获取列表元素后，我使用 setState 更新列表，但子组件不会使用新列表重新呈现。

class ParentComponent extends Component {

    state = {
        users: [{ username: 'before' }]
    }

    componentDidMount() {
        const result = [];
        db.collection("users").get().then((querySnapshot) => {
            querySnapshot.forEach(function (doc) {
                let user = doc.data();
                result.push(user);
            });
        }).then(() => {
            this.setState({
                users: result
            })
        })
    }

    render() {

        return (
            <div>
                <h1>List of users</h1>
                <CheckboxList list={this.state.users} />
            </div>
        )
    }
}

该列表显示 before 并且它不会使用数据库中的内容进行更新。我检查过，值是从数据库中获取的，它们只是没有传递给 setState 之后的 <CheckboxList />。有人可以帮助我吗？

Answer 1

问题是我从 CheckboxList 状态中检索 list，然后通过它使用它。现在我修好了。我在 CheckboxList render() 中检索它，将它存储到一个变量中，然后从那里使用它。

React.js setState 不重新渲染子组件

React.js setState does not re-render child component

setstate

reactjs