reactjs - 如何在 react.js 的迭代中处理 SetState 函数

Question

当我在 for 循环中使用 setState 函数时，它只在每个子组件 value 中分配数组的最后一个值。我如何使它分配具有相应索引的值。

class App extends Component {
  constructor() {
    super();
    this.postID = "";
    this.value = 0;
    this.name = "";

    this.state = {
      countersarray: []
    };
  }
  componentDidMount() {
    this.loadData();
  }
  //load data as from array
  loadData = countersarray => {
    var nam = ["Haseeb", "Fawad", "Khan"];
    var elements = "";
    var count = 0;

    for (var i = 0; i < nam.length; i++) {
      elements = nam[i];
      this.setState(previousState => ({
        countersarray: [
          ...previousState.countersarray,
          (countersarray = {
            key: uniqeid(),
            id: uniqeid(),
            value: 0,
            name: elements
          })
        ]
      }));
    }
  };

我期望输出具有不同的名称，但实际输出具有相同的名称。

状态

countersarray:[{id:"ju2a3ex7", key:"ju2a3ex6",name:"Khan",value:0},
               {id:"ju2a3ex9",key:"ju2a3ex8",name:"Khan",value:0},
               {id:"ju2a3exb",key:"ju2a3exa",name:"Khan",value:0}]

预期的

countersarray:[{id:"ju2a3ex7", key:"ju2a3ex6",name:"Haseeb",value:0},
               {id:"ju2a3ex9",key:"ju2a3ex8",name:"Fawad",value:0},
               {id:"ju2a3exb",key:"ju2a3exa",name:"Khan",value:0}]

标签： reactjs

Answer 1

不要setState在for..loop. 或者你可以尝试一些东西

loadData = countersarray=>{
    var name = ["Haseeb", "Fawad", "Khan"]  
    countersarray = [...countersarray, ...name.map(nm => {
            key: uniqeid(),
            id: uniqeid(),
            value: 0,
            name: nm 
          })]

this.setState({countersarray})  
}