reactjs如何在数组中插入数据？

Question

我正在使用 react.js，并且我有 class 基本组件。 现在的情况是。 我有一个带有分区名称的数组。

partitions=["P1","P2","P3"]

我有另一个名为dayDetails的数组，开头是 null。

当我的组件安装时。 我 map 分区数组并在 dayDetail 数组中添加一个 object。 分区数组中的元素数将是放入 dayDetail 数组中的对象数。 现在的问题是只有一个 object 正在放入 dayDetail 但它假设添加三个，因为分区数是 3。

下面是我的代码。

import React from "react";

class Step2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        partitions:["P1","P2","P3"],
        dayDetails:[],

    };
  }


  componentDidMount() {
    this.setTimePriceNullJson()
  }

  setTimePriceNullJson = () => {
    {this.state.partitions.map((item,index)=>( 
       this.setState({dayDetails:[...this.state.dayDetails,
        {
          "partitionIndex":index,
          "timings":[
              {"name":"sunday"}
          ],
          "pricings":[
              {"name":"sunday"}
          ]
        }
        
      ]})
    )
    )}
    
  }

  componentDidUpdate(){
    console.log("--> ",this.state.dayDetails)

  }


  render() {
    return (
      <div style={styles.main_container}>
        ...
      </div>
    )
  }
}

export default Step2;

现在output来了： this.state.dayDetail output是：

[{"partitionIndex": 2, "pricings": [[Object]], "timings": [[Object]]}]

愿望 output 是：

[
{"partitionIndex": 0, "pricings": [[Object]], "timings": [[Object]]},
{"partitionIndex": 1, "pricings": [[Object]], "timings": [[Object]]},
{"partitionIndex": 2, "pricings": [[Object]], "timings": [[Object]]}
]

Answer 1

一步一步做所有事情。 它会更短，更容易阅读。

setTimePriceNullJson = () => {
  const dayDetails = this.state.partitions.map((x, i) => {
    return {
      partitionIndex: i,
      timings: [{ name: "sunday" }],
      pricings: [{ name: "sunday" }]
    };
  });
  this.setState({ ...this.state, dayDetails: dayDetails });
};

Clarifications: setState is not reflecting changes to the state object immediatelly, in each iteration of map function state.dayDetails was an empty array, so...this.state.dayDetails was always [], and thats why only last value was set there .