Question

我想根据用户输入在Line Chart Widget组件上呈现不同的数据。所以我创建了一个选择标记：

<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);
}

Onchange Event

    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 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

您的功能this无法访问handleLineChart = (event) => { this.setState({value: event.target.value}); }。您可以像这样正确绑定它：

SELECT 
    distinct user_id
FROM 
    table
WHERE user_id not in (SELECT DISTINCT user_id FROM table WHERE is_published = 1)

在线图

2 个答案: