how to create an array of JSON objects, store them in a state array object and print the elements inside the render function in 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);
    });

    }

I am able to fetch the results from the firebase object array and parse through them and store them in the objectArray local object but not able to store them inside the state array object. 這里出了什么問題？

Answer 1

您的渲染方法應該如下所示，因為您需要返回一些 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>)

}

請注意，所有值都是空字符串，因此請確保它們不是。

更新：

根據我在您提供的文件中看到的內容，我猜您在實際收到數據之前設置了 state。 嘗試在回調中設置 state ：

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只調用一次而不是每次迭代都會更好。

Answer 2

你可以這樣做：

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);

  })