帶有對象和數組的 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:[],

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

}

希望這能解決您的問題。 如果我無法解釋清楚，請說，以便我可以嘗試為您的問題提供更好的答案。

Answer 2

正如 Felix Kling 在評論中所說，你需要一個對象數組，所以你需要有一個這樣的結構：

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