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，并且不会使用数据库中的内容进行更新。我检查了一下，然后从数据库中获取了值，只是它们没有在<CheckboxList />之后传递给setState。有人可以帮我吗？

Answer 1

问题是我正在从list状态中检索CheckboxList，然后在其中使用它。现在，我已修复它。我正在CheckboxList render()中检索它，将其存储到变量中，然后从那里使用它。

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

1 个答案: