React中为Plotly转换对象为数组及动态更新嵌套对象求助

核心问题拆解 #

• 数组被转为对象：使用Object.assign({}, this.state.data)时，因为目标参数是对象，数组会被转换为以索引为键的对象，导致newData不再符合Plotly要求的数组格式。
• 接口返回格式不匹配：response.data中的x/close等字段是对象类型，需要转为数组才能适配Plotly的OHLC图要求。
• 状态访问错误：组件状态存储在this.state中，而非this.data；且setState是异步操作，调用后无法立即获取最新状态。
• 状态更新不规范：直接使用this.state.revision++会原地修改state，不符合React状态更新的不可变原则，可能导致更新失效。

分步解决方案 #

1. 保持newData的数组类型 #

不要用Object.assign处理数组，而是通过扩展运算符创建数组副本，同时深拷贝第一个trace对象（避免直接修改原state）：

// 创建数组副本 + 深拷贝第一个trace对象
const newData = [...this.state.data];
newData[0] = {...newData[0]};

2. 将接口返回的对象转为数组 #

假设接口返回的x/close等字段是类似{0: '2024-01-01', 1: '2024-01-02'}的键值对对象，使用Object.values()转换为数组：

newData[0].x = Object.values(response.data.x);
newData[0].close = Object.values(response.data.close);
newData[0].open = Object.values(response.data.open);
newData[0].low = Object.values(response.data.low);
newData[0].high = Object.values(response.data.high);

3. 正确访问与异步状态更新 #

• 状态必须通过this.state.data访问，而非this.data。
• 若要查看更新后的状态，需在setState的回调函数中（或componentDidUpdate生命周期）获取：

this.setState({ data: newData }, () => {
  console.log('更新后的data:', this.state.data);
});

4. 规范更新revision状态 #

使用函数式setState确保获取到最新的revision值（避免异步更新导致的状态不一致）：

this.setState(prevState => ({
  revision: prevState.revision + 1
}));

修正后的完整getStart方法 #

getStart = () => {
  const symbol = 'tst';
  return axios
    .post(API_URL + "startRAW", { symbol })
    .then((response) => {
      if (response.data) {
        // 创建数组副本并深拷贝trace对象
        const newData = [...this.state.data];
        newData[0] = {...newData[0]};

        // 转换接口返回的对象为数组
        newData[0].x = Object.values(response.data.x);
        newData[0].close = Object.values(response.data.close);
        newData[0].open = Object.values(response.data.open);
        newData[0].low = Object.values(response.data.low);
        newData[0].high = Object.values(response.data.high);

        // 批量更新状态，减少重渲染
        this.setState(
          prevState => ({
            data: newData,
            revision: prevState.revision + 1
          }),
          () => {
            console.log('更新后的data:', this.state.data);
            console.log('更新后的revision:', this.state.revision);
          }
        );

        return response;
      }
    });
};

额外优化建议 #

在componentDidMount中合并setState调用，减少不必要的组件重渲染：

componentDidMount(){
  this.setState({
    config: init_config,
    layout: init_layout,
    data: init_data
  });
  this.getStart();
}

内容的提问来源于stack exchange，提问作者HermDP