无法将数据从状态渲染到 React 组件

Question

我正在尝试调用 Firebase 并以 JSON 的形式获取数据，然后将 JSON 数组的对象传递给其他一些 react-native 组件。

我能够成功调用 Firebase，然后获取 JSON 对象数组。 然后我将该 JSON 对象列表存储在 STATE 变量中，然后尝试将对象一个一个地传递给另一个 react-native 组件。

代码：

class DisplayCardInformation extends Component 
{
const itemsRef = db.ref('firebaseLink/');

state = {
        listDataFromDB: null,
        lastKey: null
    };
componentDidMount() 
    {
        itemsRef.on('value', ( snapshot ) => {
            var data = snapshot.val();

            this.setState({
                listDataFromDB : snapshot.val(),
            });

            var keys = Object.keys(data);
            keys.forEach((key) => 
            { 
                this.setState({
                    lastKey: key
                });
            });
        });
    }

render() {

        this.state.listDataFromDB.map((listDataItem) => {
            return(
                <CardInformation listItem = {listDataItem} />
            );
        });     
    } 

}

export default DisplayCardInformation;

我正在尝试将信息传递给 CardInformation。

错误：

TypeError: TypeError: null is not an object (evaluating 'this.state.listDataFromDB.map')

This error is located at:
    in DisplayCardInformation (at Home.js:33)

Answer 1

您需要将状态的初始值设置为任何数组，例如：

state = {
        listDataFromDB: []
    };

在您的情况下发生的事情是，当您的组件第一次呈现时，它会将null传递给子组件。