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

您正在用承诺初始化this.state.book。尝试将其设置为null：

this.state = {
    book: null
}

Answer 2

您不能用承诺初始化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;

承诺基本上是异步功能，可以在需要的时候解决。

所以当您这样做

 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)之前为项目分配了一个新值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的了解不多，因此无法提供帮助。

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

2 个答案: