reactjs - ReactJS setState 与对象和数组

Question

我想在数组方面有一个数据结构，例如

data[0]
  title:"ABC"
  photo: "./123.jpg"
  summ: "text text test"
data[1]
  title:"ABCD"
  photo: "./1234.jpg"
  summ: "text texwt test"

我曾尝试像这样设置状态，但它不起作用。请指导我;(

             this.setState({
               data:{
                title: [ ...this.state.data.title, title ],
                photo: [ ...this.state.data.photo, photo ],
                summ: [ ...this.state.data.summ, summ ]   

                    }

                  });

Uncaught (in promise) TypeError: _this.state.data.concat is not a function

///// 错误没有初始化我的状态

// this is incorrect
this.state={
data:{
title:null,
photo:null,
summ:null,
}
//The correct version is
this.state={
data:[],

标签： reactjsstate

Answer 1

您的解决方案不起作用的原因是您试图将对象分配给数组。

我不确定您是要尝试将项目添加到数组还是更改数组中的单个项目。如果你想添加，你可以这样做：

this.setState({
...this.state.data, {title, photo, summ}
})

但是，如果您尝试更改数组中的项目。您应该存储在一个临时变量中，然后像这样分配它。

const tempArray = this.state.data;
this.setState({
    data: tempArray.filter(//some change function)
})

如果您尝试将数据初始化为状态，则可以这样做：

import JsonData from "./myJsonData"
constructor(props) {
super(props);
this.searchBarRef = React.createRef();
this.state = {
  data: JsonData
};

}

希望这可以解决您的问题。如果我不能清楚地解释，请说，所以我可以尝试对您的问题给出更好的答案。