如何创建 JSON 对象数组，将它们存储在状态数组对象中并在 react-native 中打印渲染函数内的元素

Question

I am making a call to firebase database and parsing through the JSON objects and storing them in an array locally. Then I am copying the array created to a state array object and later printing the values of the state array object inside the render() function.



class ABC extends Component
    {

    state = {
    objectArray:[
     {
       key1:'',
       key2:'',
       key3:'',
       key4:''
     }
    ]
    };


    componentDidMount() {
        var objectArray = [];
        var object = {
             key1:'',
             key2:'',
             key3:'',
             key4:''
            };

    // parsing through the firebase object and storing it in the object which is happening successfully

    objectArray.push(object);
//when I print the array it gives me the result: [object Object],[object Object] which means two objects are getting stored here.

    this.setState({objectArray: objectArray });

    }

    render()
    {

    this.state.objectArray.map(function(item){
    console.log("The items is "+item.key1); // No data getting printed here.
    console.log("The items is "+item.key2);
    console.log("The items is "+item.key3);
    console.log("The items is "+item.key4);
    });

    }

我能够从 firebase 对象数组中获取结果并解析它们并将它们存储在 objectArray 本地对象中，但无法将它们存储在状态数组对象中。这里出了什么问题？

Answer 1

你可以这样做：

this.state.objectArray.map( (item)=> return {
    console.log("The items is "+item.key1); // No data getting printed here.
    console.log("The items is "+item.key2);
    console.log("The items is "+item.key3);
    console.log("The items is "+item.key4);

  })

Answer 2

您的渲染方法应该如下所示，因为您需要返回一些 JSX。

render() {

  this.state.objectArray.map(function (item) {
    console.log("The items is " + item.key1); // No data getting printed here.
    console.log("The items is " + item.key2);
    console.log("The items is " + item.key3);
    console.log("The items is " + item.key4);
  });

  return this.state.objectArray.map(item => <p>{item.key1}</p>)

}

请注意，所有值都是空字符串，因此请确保它们不是。

更新：

根据我在您提供的文件中看到的内容，我猜您是在实际接收数据之前设置状态。尝试在回调中设置状态：

componentDidMount() {

    const objectArray = [];
    const object = {
        key1: '',
        key2: '',
        key3: '',
        key4: ''
    };

    objectsRef.on('value', (snapshot) => {
        snapshot.forEach(function (childSnapshot) {
            objectsRef.child(childSnapshot.key).on('value', function (childData) {
                object.key1 = childData.val().key1;
                object.key2 = childData.val().key2;
                object.key3 = childData.val().key3;
                object.key4 = childData.val().key4;
                objectArray.push(object);
                this.setState({ objectArray: objectArray });
                console.log("objectArray array is " + objectArray.toString());
            })
        });

    });
}

最好修改它，使setState 只调用一次而不是每次迭代。