请教一个 React 问题

[AAASUKA]

我有一个 class Chart 组件用来绘制图表
现在有一个 data[]数组存储若干组数据
我做了一个下拉框，希望能在选择不同的数据来绘制图表
我现在的情况是默认使用 data[0]绘制数据，但是下拉框更新后，图表不会更新 这种希望图表能随着选择重新渲染、绘制的情况，有没有什么解决方案 这个图表初始为空，点击一次下拉框后出现，再选择下拉框就不会变了

class Main extends Component {
  constructor(props) {
       super(props);
       this.state = {
          value: 0,
          chart: this.draw(0),
       };
    this.handleChange = this.handleChange.bind(this);
    this.draw = this.draw.bind(this);
  }

  handleChange(event) {
    this.setState({
      value: event.target.value,
      chart: this.draw(event.target.value),
    });
  }

  draw(index) {
    return (
    <Chart data={this.props.data[index]}></Chart>
     );
  };

  render() {
    var options = <></>
    for (let i = 0; i < this.props.childrenNumber; i++) {
          options = <>{options}<option value={i}>{i+1}</option></>
    }
    return (
      <div>
      <select value={this.state.value} onChange={this.handleChange}>
       {options}</select>
       {this.state.chart}
      </div>
    )
  }
}

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      value: event.target.value,
    });
  }
  render() {
    var options = <></>
    for (let i = 0; i < this.props.data.length; i++) {
      options = <>{options}<option value={i}>{i+1}</option></>
    }
    return (
      <div>
         <select 
            value={this.state.value} 
            onChange={this.handleChange}>
                {options}
         </select>
         <Chart 
            data={this.props.data[this.state.value}>
         </Chart>  
    </div>
    );
  }
}

改成这样也没什么效果，图表不会改变

[mm163]

下拉框更新后，把 data[x] 用 props 传给 Chart 组件呀。

[rockjike]

为什么把组件放 state 里, 不是放图表数据就好了

[withzhaoyu]

写法有点奇怪，简单的解决方式是你把 <Chart />上加个 key={index}试试。。。

[AAASUKA]

@rockjike 放在图标数据里也不会改变

[rockjike]

```
class Main extends Component {
constructor(props) {
super(props);
const { data = [] } = props
this.state = {
current: 0,
dataList: data,
};
this.handleChange = this.handleChange.bind(this);
}

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


render() {
const { dataList, current} = this.state
var options = <></>
for (let i = 0; i < this.props.childrenNumber; i++) {
options = <>{options}<option value={i}>{i+1}</option></>
}
return (
<div>
<select value={this.state.value} onChange={this.handleChange}>
{options}</select>
<Chart data={dataList[current]}></Chart>
</div>
)
}
}
```

[rexchen94]

写法很奇怪，不需要单独写一个 draw 来获得 Chart 组件，直接写 render 里就行，也没必要存在 state 里。试试楼上加个 key

[IGJacklove]

你这写法看不懂... 一般不都是这么写的吗?

class Main extends Component {
constructor(props) {
super(props);
this.state = {
value: 0,
chartIndex: 0,
};
this.handleChange = this.handleChange.bind(this);
this.draw = this.draw.bind(this);
}

handleChange(event) {
this.setState({
value: event.target.value,
chartIndex: event.target.value,
});
}

draw(index) {
return (
<Chart data={this.props.data[index]}></Chart>
);
};

render() {
var options = <></>
for (let i = 0; i < this.props.childrenNumber; i++) {
options = <>{options}<option value={i}>{i+1}</option></>
}
const {chartIndex} = this.state
return (
<div>
<select value={this.state.value} onChange={this.handleChange}>
{options}</select>
{this.draw(chartIndex)}
</div>
)
}
}

[ljpCN]

5 楼是正常写法，楼主试了 5 楼的代码再看看吧

[ljpCN]

@ljpCN 没看到附言。原来是已经写成 5 楼的写法了。那你应该检查一下你的 chart 组件是不是能做到对 props 动态响应。

[YadongZhang]

for 循环什么意思

[AAASUKA]

@YadongZhang 就是下拉框的可选择项

[YadongZhang]

@AAASUKA 所以 value 和 options 什么关系

[baxtergu]

```javascript
class Main extends Component {
constructor(props) {
super(props);
this.state = {
value: 0,
};
this.handleChange = this.handleChange.bind(this);
}

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

render() {
const { data = [] } = this.props;
return (
<>
<select value={this.state.value} onChange={this.handleChange}>
{data.map((item, idx) => (
<option value={idx} key={JSON.stringify(item)}>
{idx + 1}
</option>
))}
</select>
<Chart data={data[this.state.value]} />
</>
);
}
}
```

你的 Chart 应该是只有 componentDidMount 的时候渲染了一次，之后就不渲染了，如果是 echarts 的话要手动在 componentWillReceiveProps 周期里面去判断 props.data 是不是改变了然后手动去用 echarts 的 api 去刷新图表

[AAASUKA]

@YadongZhang 选项是 1，2，3，4 对应的值是 0，1，2，3

[YadongZhang]

我是 React 新手，没看懂 <select> 里的 value 和 onChange （我成了题主了。。。

[AAASUKA]

@YadongZhang hhh 我也是刚学没多久，因为下拉框的选项数目是不一定的，所以我用了一个循环，data 有几组数据，下拉框就有几个选项

[cyy564]

你先把 Chart 组件给注释了，单纯渲染出 data 中对应 index 的数据，看看有没有变，如果变了的话就是 Chart 的问题了