在获取数据后，React setState不会重新呈现

Question

如果已经获取数据，则此代码有效。
但是，如果我刷新页面并且不重新呈现元素，则无法使用。
如果值得一提，我还将使用Next JS。

class Books extends Component {
    constructor(props) {
        super(props);
        this.state = {
            book: []
        }
        this.renderBooks= this.renderBooks.bind(this);
    }

    renderBooks() {
        let item;
        let items = [];
        return new Promise((resolve, reject) => {
            this.props.ids.forEach(address => {
                firebase.database().ref(`/books/${address}`)
                    .on('value', snap => {
                        item = snap.val();
                    });
                items.push(item);
            })
            resolve(items);
        });
    }

    async componentDidMount() {
        try {
            let res = [];
            res = await this.renderBooks();
            console.log(res);
            this.setState({ book: res });
        } catch (error) {
            console.log(error);
            this.setState(prevState => {
                return { book: 'err' }
              });
        }
    }

    render() {
        return (
            <div>
                { <List grid={{ gutter: 16 }}
                        dataSource={ this.state.book }
                        renderItem={ item => (
                            <List.Item>
                                <Card title={ !!item && item.title }>
                                    ...Book content...
                                </Card>
                            </List.Item>
                        )} />
                }
            </div>
        );
    }
}

export default Books; 

关于setState和获取我在这里错过的数据有什么要知道的吗？
PS。编辑构造函数以预定：[]。

Answer 1

你不能book用承诺来初始化。相反，您可以采用如下所示的解决方案。

向您的方法添加条件渲染render，以便它知道何时渲染book。在这种情况下您也不需要返回new Promise。

class Books extends Component {
    constructor(props) {
        super(props);
        this.state = { books: null }
    }

    componentDidMount() {
        this.renderBooks()
    }

    renderBooks() {
        this.props.ids.forEach(address => {
            firebase.database().ref(`/books/${address}`)
             .on('value', snap => {
                this.setState({books: [...(this.state.books || []), snap.val()] });
            });
        });
    }

    render() {
        return (
           this.state.books ? 
            <div>
                { <List grid={{ gutter: 16 }}
                        dataSource={ this.state.books }
                        renderItem={ item => (
                            <List.Item>
                                <Card title={ !!item && item.title }>
                                    ...Book content...
                                </Card>
                            </List.Item>
                        )} />
                }
            </div> 
           : 'Initializing'
        );
    }
}

export default Books;

Promise 基本上是异步函数，在适当的时候解决。

所以当你这样做时

 var item, items = []; // <---- Step 1
 this.props.ids.forEach(address => {
     firebase.database().ref(`/books/${address}`)
         .on('value', snap => {
             item = snap.val(); // <--- Step 3
         });
     });
     items.push(item); // <----- Step 2
 });

步骤是这样的。所以你在items.push(item)为 item 分配一个新值之前所做的事情是snap.val()。这使得item undefined.

我想你得到的第二个结果是由于缓存。如果互联网连接非常快，Step 3则可能早于Step 2，但这是一个错误的假设。这就是为什么第二次你得到正确结果的原因。

在这个答案的情况下，不是有一个items数组，而是snap.val()添加到 this.state.books 中。但这使得它有点重量级。因为每次on('value')调用查询时，setState都会触发该方法，并再次渲染组件。如果有 1000 个 id，状态就会改变 1000 次。

这就是为什么我建议您一次获取所有数据，而不是一一获取数据。尝试用谷歌搜索类似的东西'retrieve multiple data from firebase javascript'。不幸的是，我对 firebase 不太了解，所以无法提供帮助。