Question

我正在得到一个对象列表作为这样的响应

您可以看到对象不在数组中。我想将这些对象推入数组。我尝试了以下方式

this.setState({
   countrydata: this.state.countrydata.push(datasnapshot.val()),
})

但是没有用。将这些对象推入数组的正确方法是什么？

PS：

componentDidMount() {
        const countryCode = this.props.match.params.countryCode;
        var countryName = getName(countryCode);
        var firebaseHeadingref = firebase.database().ref(countryCode);
        firebaseHeadingref.once('value').then(datasnapshot => {
            this.setState({
                countrydata: datasnapshot.val(),
                countryName: countryName,
                loading: false
            })
        });
    }

Answer 1

您可以尝试类似的方法。 Array.prototype.push()。我还没有测试下面的代码。


componentDidMount=async() =>{
        const countryCode = this.props.match.params.countryCode;
        var countryName = getName(countryCode);
        var firebaseHeadingref = firebase.database().ref(countryCode);
       const datasnapshot = await firebaseHeadingref.once('value');

  this.setState(prevState=>{
   ...prevState,
    countryName,
    countrydata: [...prevState.countrydata, datasnapshot.val()],
    loading: false,
  },()=>console.log("done!"))


    }

Answer 2

我认为字典中的“ countrydata”不是数组。尝试将其初始化为空数组。

Answer 3

Array.prototype.push将在推送后返回数组的新长度，因此您实际上是将状态设置为数字。

不允许您将数组更改为具有React状态，您需要创建一个包含新元素的新数组：

// When updating state based on current state, use the function form of setState.
this.setState(state => {
   countrydata: [...state.countrydata, datasnapshot.val()],
})

这是假设countryData确实是一个数组，从您的屏幕快照来看，它似乎不是（它似乎是一个对象），因此您可能会在此过程中某处设置错误（或{{1 }}）不包含您认为的内容。

Answer 4

使用datasnapshot.val()遍历对象或使用for-in。

Object.keys()

const data = datasnapshot.val();
const countrydata = [];

for (let key in data) {
  countrydata.push(data[key])
}

// using Object.keys()

Object.keys(data).forEach((key) => countrydata.push({ [key]: data[key]}))

this.setState({
  countrydata
})

Answer 5

您可以这样做：

const keys = Object.keys(countryData);  // array of the keys ["place_1", ...]
const array = Array(keys.length);       // Prepares the output array of the right size
for (let i=0; i<keys.length; i++) {
  const country = countryData[keys[i]]; // get the next country object
  country.key = keys[i];                // add the key into the object if you need it
  array[i] = country;                   // store the value into the array at index 'i'
}
// array now is [ {key: "place_1", description: "Sigiriya Rock Fortress"}, ...]
this.setState({countryDataArray: array});

Answer 6

您需要将响应数据从firebase转换为像这样的数组：

componentDidMount() {
  const countryCode = this.props.match.params.countryCode;
  var countryName = getName(countryCode);
  var firebaseHeadingref = firebase.database().ref(countryCode);
  firebaseHeadingref.once('value').then(datasnapshot => {

    const countryData = datasnapshot.val();

    const countryDataArray = [];

    for (const key in countryData) {
      countryDataArray.push({ key, ...countryData[key]});
    }

    this.setState({
      countrydata: countryDataArray,
      countryName: countryName,
      loading: false
    })
  });
}

在React.js中将对象推入数组

6 个答案: