在 React 中，如何在循環中設置 state 變量？

Question

我有許多 state 變量（我只顯示 3 個）：

class IntroductionPage extends React.Component<SomePageProps, {inId: string,
  i1: string,
  i2: string
}> {
  constructor(props: any) {
    super(props);
    this.state = {inId:'',
      i1:'',
      i2:''
    };
  }

我正在從數據庫中讀取鍵值對：

+------------+------------+------------+
| start_type | field_name | start_text |
+------------+------------+------------+
| 0          | i1         | hi         |
+------------+------------+------------+
| 0          | i2         | it's me!   |
+------------+------------+------------+
| 0          | i3         | Schoon     |
+------------+------------+------------+


for (var key in response.data) {
  var dat = response.data[key];
  getStartType=dat['start_type']//JSON.stringify(dat['start_type']);
  for (var inner_key in dat) {
    console.log('key=' + inner_key + ' value=' + dat[inner_key]);
  }

給

key=start_type value=0
key=field_name value=i1
key=start_text value=hi
...

現在有什么方法可以遍歷這些檢索到的值並設置 state，例如類似於循環或 map 版本：

this.setState({dat['field_name']:dat['start_text']});

所以返回的第一行是 fieldname= i1, start_text ='hi' 所以循環會setState ({i1:'hi'}) ？

Answer 1

反應文檔：

setState() 不會立即改變 this.state 而是創建一個掛起的 state 轉換。 在調用此方法后訪問 this.state 可能會返回現有值。 無法保證對 setState 的調用的同步操作，並且調用可能 > 批處理以提高性能

不要在循環中調用 setState，只需在循環中更新局部變量，然后在該變量上調用 setSate 方法，它會為您節省一些重新渲染

Answer 2

作為“我可以這樣做嗎？”的技術問題。 答案是“是”。 可以在示例中的循環內調用setState ，因為每個 state 更新彼此獨立，並且不依賴於 state 的先前值。 React 可能會將setState更新批處理在一起，這樣您就不會有多次重新渲染。

for (var key in response.data) {
  var dat = response.data[key];
  this.setState({ [dat.field_name]: dat.start_text });
}

您在[dat.field_name]周圍使用括號，因為它是一個變量屬性鍵。 但是變量屬性名稱對於 Typescript 來說是個問題，因為它假定它們是string而不是有效鍵。

---

我可能會按照@Sharon Geller 的建議做，並使用組合值調用setState一次。

const changes = response.data.reduce(
  (acc, curr) => ({ ...acc, [curr.field_name]: curr.start_text }),
  {}
);
this.setState(changes);

從技術上講，這不需要斷言，因為changes的類型是空的 object {} ，但您可能希望將初始值{} as State 。