javascript - 将状态传递给 preact 组件

Question

我有一个新人要 react /准备。我有一个简单的应用程序，可以从 API 获取天气预报，我希望将此数据传递到图表组件(预图表)。我遇到的问题是，当渲染此图表时，尚未获取数据并且出现类型错误，因为我已经在尝试处理它。我看到另一个问题，其中最重要的答案建议当我的父组件的状态尚未评估时有条件地将 null 而不是组件分配给变量。

在父组件中，我有以下方法设置要传递的状态(由父组件的构造函数调用):

parseHourly = (parsed_json) => {
    for (let i = 0; i < 7; i++) {
        var h = parsed_json['hourly_forecast'][i]['FCTTIME']['hour'];
        var t = parsed_json['hourly_forecast'][i]['temp']['metric'];
        var pair = {hour: h, temperature: t};
        this.state.temps.push(pair);
    }
}

这是我创建图表的父级渲染方法:

render() {
    let myChart;
    if(this.state.temps) {
        myChart = <Chart temps={this.state.temps}/>
    } else {
        myChart = null
    }

    return (
        <div class={ style.container }>
            ...
            { myChart }
            ...
        </div>
    );
}

在图表组件中，我尝试直接在 render() 方法中访问 this.props.temps，但最终得到的值为 未定义。 我究竟做错了什么？非常感谢您的帮助。

Answer 1

您需要使用setState函数，创建先前状态的副本，然后推送新项目。
请引用React生命周期文档:https://reactjs.org/docs/react-component.html#setstate

下面的代码是如何在您的情况下设置状态。但是，您必须将此函数放在 React 可以更新状态的位置:

parseHourly = (parsed_json) = > {
  const bufferTemps = JSON.parse(JSON.stringify(this.state.temps));
  for (let i = 0; i < 7; i++) {
    const h = parsed_json['hourly_forecast'][i]['FCTTIME']['hour'];
    const t = parsed_json['hourly_forecast'][i]['temp']['metric'];
    const pair = {
      hour: h,
      temperature: t
    };
    bufferTemps.push(pair);
  }
  this.setState({
    temps: bufferTemps
  });
}

注意:
const bufferTemps = [...this.state.temps]不会为每个项目创建深拷贝，并且它不应该这样做 this.state.temps.push(pair)
为了解决这个问题，我使用 JSON.parse(JSON.stringify(this.state.temps))创建深度克隆。