使用Linechart上的三元運算符，數據不會更改

Question

我想根據用戶輸入在“折線圖小部件”組件上呈現不同的數據。 所以我創建了一個選擇標簽：

<select id="lang" onChange={this.handleLineChart} value={this.state.value}>
          <option value="indiaData">All India</option>
          <option value="stateData">States</option>
</select>

建設者

constructor(props){
    super(props);
    this.state = {
      value: 'indiadata'
    }
   this.handleLineChart = this.handleLineChart.bind(this);
}

變更事件

    handleLineChart(event) {
      this.setState({value: event.target.value});
    }

我的組件

    {
        this.state.value === "indiaData" ? 
          <LineChartWidget data={indiaData} /> :
          <LineChartWidget data={stateData} />
    }

我的數據“ indiaData”和“ stateData”都是對象數組，我正在通過API提取它們。 默認情況下，它在呈現indiaData時完美地工作，但是當我將輸入更改為States時，盡管可以將其記錄在控制台中（更改輸入時），但它不會在折線圖中顯示任何數據。 數據沒有問題。

另外，如果我將默認狀態值反轉為

     this.state = {
        value: 'statedata'
     }

和我的組件完全相反

    {
        this.state.value === "stateData" ? 
          <LineChartWidget data={stateData} /> :
          <LineChartWidget data={indiaData} />
    }

然后，它將在更改輸入時呈現stateData而不是indiaData。

還有另一種情況，所以當我的組件看起來像這樣時

    {
        this.state.value === "stateData" ? 
          <LineChartWidget data={stateData} /> :
          <div>Test</div>
    }

它與div完美搭配，但與第二個Linechart搭配不了。

很快，我的問題是，它僅呈現第一個條件，而不呈現第二個條件，請記住數據沒有問題。

Answer 1

在select標記內，使用.bind（this）綁定作用域

<select id="lang" onChange={this.handleLineChart.bind(this)} value={this.state.value}>
      <option value="indiaData">All India</option>
      <option value="stateData">States</option>
</select>

Answer 2

您的函式handleLineChart()無法存取this 。 您可以像這樣正確地綁定它：

handleLineChart = (event) => {
  this.setState({value: event.target.value});
}