2

我有一个新人要做出反应/预演。我有一个从 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>
    );
}

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

4

2 回答 2

3

您需要使用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))创建一个深克隆。

于 2018-03-09T01:34:15.720 回答
1

似乎您正在初始化this.state.temps = []，但在您的render()方法中您正在检查if (this.state.temps)。JS中的空数组是truthy( ==true)，所以检查总会通过。

尝试这个：

class Parent extends Component {
  constructor() {
    super();
    this.state.temps = [];
  }
  // ... etc ...
  render() {
    let myChart
    // if we have any temperatures:
    if (this.state.temps.length>0) {
      myChart = <Chart temps={this.state.temps} />
    }
    return <div class={style.container}>{myChart}</div>
  }
}

class Chart extends Component {
  render() {
    // now we know temps will be an Array of 1 or more items:
    console.log(this.props.temps)
  }
}
于 2018-03-09T15:06:19.717 回答