Question

我有一个使用componentDidMount的组件，其中axios映射json文件，将值放入一个新数组，然后对这些值运行setState。这似乎有效。

但是当我尝试将这些值传递给子组件时，我可以显示新的状态值，但它们不会传递给子组件。我注意到当我在构造函数中设置状态默认状态值时，这些值被发送到子级，但不是最新的setState值，所以它似乎在componentDidMount中的setState之前调用子级而不是更新。

所以，目前我的构造函数设置默认值为1900/2000

constructor (props, context) {
  super(props, context)
    this.state = {
      startDate: 1900,
      endDate: 2000,
      epochs: '',
    }
  }

但componentDidMount中的逻辑将这些更改为1600-1700。因此，它读取＆＃34;时间轴：1600-1700＆＃34;，但通过1900＆amp; 2000年到TimeLine：

return (
    <div className="class-nav">
      Timeline: {this.state.startDate} - {this.state.endDate} 
      <TimeLine
        startDate = {this.state.startDate}
        endDate = {this.state.endDate}
      />
    </div>
)

处理此问题的最佳方法是什么，因为我在圈子里无所作为。

由于

更新了更多代码：

这是componentDidMount ...

  componentDidMount(){

var epochArray = [];
axios.get('/json/periods.json') // JSON File Path
.then(({ data })=> {
  data.map((epochs) => {
    epochArray[epochs.epoch] = [epochs.start,epochs.end];
    return epochArray;
  });

  this.setState( {
    epochs: epochArray,
    startDate: parseInt(epochArray[this.state.epoch][0],0),
    endDate: parseInt(epochArray[this.state.epoch][1],0),
  });

})
.catch((err)=> {})
}

我将json中的数据转换为关联数组，以便于查找，然后使用我的默认纪元值来设置开始和结束日期。如上所述，它在我的渲染中回显时会正确显示，但它不会传递给TimeLine组件。

状态值显示但不传递

0 个答案: