当状态具有数组时对状态更新和呈现进行反应

Question

我正在根据状态绘制表，该状态是一个对象数组

该对象中的每个键值最初都设置为“正在加载”并映射到表列，并在解析各自的Promise时进行更新。

问题是，即使解决了各自的承诺，我仍然在表中有些杂乱的“加载”

这是我设置状态的方式

loadData(listId="default"){
this.props.dispatch(actions.getList(listId)).then(getListResult =>{
  const list = getListResult.map( item => {
    return {
      id: item.id,
      name: item.display_name,
      column1: "loading",
      column2: "loading",
      column3: "loading",
      column4: "loading",
      column5: "loading",
      column6: "loading",
      column7: "loading",
      column8: "loading"
    }
  });

  this.setState({
    table: list
  });

  list.map((item, index) => {
    return [
      this.props.dispatch(actions.getData1(item.id)).then( getData1Result =>  {
        console.log("getData1Result: ",getData1Result);
        list[index].column1 = getData1Result.length ? getData1Result[2].key1 : null;
        list[index].column2 = getData1Result.length ? getData1Result[1].key2 : null;
        this.setState((prevState) => ({
          tableData: list
        }));
      }),
      this.props.dispatch(actions.getData2(item.id)).then( getData2Result => {
        console.log("getData2Result: ",getData2Result);
        list[index].column3 = getData2Result.length ? getData2Result[2].key1 : null;
        list[index].column4 = getData2Result.length ? getData2Result[1].key2 : null;
        list[index].column5 = getData2Result.length ? getData2Result[3].key3 : null;
        this.setState((prevState) => ({
          table: list
        }));
      }),
      this.props.dispatch(actions.getData3(item.id)).then( getData3Result => {
        console.log("getData3Result: ",getData3Result);
        list[index].column6 = getData3Result;
        this.setState((prevState) => ({
          table: list
        }));
      }),
      this.props.dispatch(actions.getData4(item.id)).then( getData4Result => {
        console.log("getData4Result: ",getData4Result);
        list[index].column7 = getData4Result.length;
        this.setState((prevState) => ({
          table: list
        }));
      }),
      this.props.dispatch(actions.getData5(item.id)).then( getData5Result => {
        console.log("getData5Result: ",getData5Result);
        list[index].column8 = getData5Result;
        this.setState((prevState) => ({
          table: list
        }));
      })
    ];
  });
})

}

我的整个组件如下

@connect((state) => state)
export default class TableContainer extends React.PureComponent{
  constructor(props) {
    super(props);
    this.state= {
      tableData:[]
    }
    this.loadData = this.loadData.bind(this);
  }

  loadData(listId="default"){
    this.props.dispatch(actions.getList(listId)).then(getListResult =>{
      const list = getListResult.map( item => {
        return {
          id: item.id,
          name: item.display_name,
          column1: "loading",
          column2: "loading",
          column3: "loading",
          column4: "loading",
          column5: "loading",
          column6: "loading",
          column7: "loading",
          column8: "loading"
        }
      });
    
      this.setState({
        table: list
      });
    
      list.map((item, index) => {
        return [
          this.props.dispatch(actions.getData1(item.id)).then( getData1Result =>  {
            console.log("getData1Result: ",getData1Result);
            list[index].column1 = getData1Result.length ? getData1Result[2].key1 : null;
            list[index].column2 = getData1Result.length ? getData1Result[1].key2 : null;
            this.setState((prevState) => ({
              tableData: list
            }));
          }),
          this.props.dispatch(actions.getData2(item.id)).then( getData2Result => {
            console.log("getData2Result: ",getData2Result);
            list[index].column3 = getData2Result.length ? getData2Result[2].key1 : null;
            list[index].column4 = getData2Result.length ? getData2Result[1].key2 : null;
            list[index].column5 = getData2Result.length ? getData2Result[3].key3 : null;
            this.setState((prevState) => ({
              table: list
            }));
          }),
          this.props.dispatch(actions.getData3(item.id)).then( getData3Result => {
            console.log("getData3Result: ",getData3Result);
            list[index].column6 = getData3Result;
            this.setState((prevState) => ({
              table: list
            }));
          }),
          this.props.dispatch(actions.getData4(item.id)).then( getData4Result => {
            console.log("getData4Result: ",getData4Result);
            list[index].column7 = getData4Result.length;
            this.setState((prevState) => ({
              table: list
            }));
          }),
          this.props.dispatch(actions.getData5(item.id)).then( getData5Result => {
            console.log("getData5Result: ",getData5Result);
            list[index].column8 = getData5Result;
            this.setState((prevState) => ({
              table: list
            }));
          })
        ];
      });
    })
  }

  componentDidMount() {
    this.loadSummaryAnalyticsDataForCohort(cohortId);
  }

  render(){
  const {tableData} = this.state;
  return(
    <TableComponent tableData={tableData} />
  )
  }
}

@connect((state) => state)
class TableComponent extends React.PureComponent{
  render(){
  const {tableData} = this.props;
  return (
    <table>
    <thead>
      <tr>
      <th>Name</th>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>
      <th>Column7</th>
      <th>Column8</th>
      </tr>
    </thead>
    <tbody>
      {tableData && tableData.map((item, index) => {
            return (
              <tr key={index}>
                <td>{item.name}</td>
                <td>{ item.column1 ? item.column1 : 0 }</td>
                <td>{item.column2 ? item.column2 : 0 }</td>
                <td>{item.column3 ? item.column3 : 0 }</td>
                <td>{item.column4 ? item.column4 : 0 } </td>
                <td>{item.column5 ? item.column5 : 0 }</td>
                <td>{item.column6 && item.column6.length || 0}</td>
                <td>{item.column7}</td>
                <td>{item.column8 && item.column8.length || 0}</td>
              </tr>
            )
      })}
    </tbody>
    </table>
  )
  }
}

我的输出类似于TableComponent的connect

并且这样，TableComponent无需连接

我的某些操作不会操纵redux存储，而只是从已解决的promise中返回数据

我不想依靠redux存储更新来呈现我的组件，并不想在TableComponent上断开连接