Javascript 使用状态反应条件渲染

我有两个

选择选项

，当我选择两队时，我必须在图表中显示两队数据：主队和客队

这是一个原型

目前，我只能在图表中显示带有

dataKey

的单线组件，而不能在下拉列表中选择两个团队的双线组件

当我在第一个

select

中选择团队主页时，如何在React中说，显示带有

datakey

状态值的

hometeam

行组件

{this.state.hometeam && <Line type='monotone' key={'1'} dataKey={this.state.value} stroke='#132908' yAxisId={1} activeDot={{fill: '#132908', stroke: 'none', r: 6}}/>}

---

在中，我仅显示了不依赖于状态的通用线组件

您的图形是从这个单一的

this.state.value

驱动的，当选择任一下拉列表时，它会被覆盖。我会把它分为两个独立的财产

state = {
  data: initialState
  hometeamValue: '',
  awayteamValue: ''
}

handleChangeHomeTeam = (e) => {
  this.setState({
    hometeamValue: e.target.value,
  });
};

handleChangeAwayTeam = (e) => {
  this.setState({
    awayteamValue: e.target.value,
  });
};

render(){
  return(
    // ...
    <select value={this.state.hometeamValue} onChange={this.handleChangeHomeTeam}>
      <option value="Betis">Betis</option>
      <option value="Real">Real</option>
    </select>
    <select value={this.state.awayteamValue} onChange={this.handleChangeAwayTeam}>
      <option value="Betis">Betis</option>
      <option value="Real">Real</option>
    </select>
    // ...
    <Line dataKey={this.state.hometeamValue} ... />}
    <Line dataKey={this.state.awayteamValue} .../>}
  }
}

状态={
数据：initialState
hometeamValue:“”，
awayteamValue:'
}
handleChangeHomeTeam=（e）=>{
这是我的国家({
hometeamValue:e.target.value，
});
};
HandleChangeAwayTam=（e）=>{
这是我的国家({
awayteamValue:e.target.value，
});
};
render（）{
返回(
// ...
贝蒂斯
真实的
贝蒂斯
真实的
// ...
}
}
}
}

问题出在你的处理程序上，为Home和Away创建两个单独的状态项。目前你只是在设置值。我理解这一点，但我对你的解决方案中的值有问题，你的更改中的选择值如何？状态也有相同的错误，如果你能在codepen演示中显示，我可以接受你的这是错误：Uncaught TypeError:无法读取未定义的属性“scale”谢谢您的帮助，我已经用您的更改更新了codepen，我得到了相同的错误：Uncaught TypeError:无法读取未定义的属性“scale”。我不确定您的错误是什么。当我将所有内容粘贴到codepen中时，我发布的确切代码片段工作正常。

state = {
  data: initialState
  hometeamValue: '',
  awayteamValue: ''
}

handleChangeHomeTeam = (e) => {
  this.setState({
    hometeamValue: e.target.value,
  });
};

handleChangeAwayTeam = (e) => {
  this.setState({
    awayteamValue: e.target.value,
  });
};

render(){
  return(
    // ...
    <select value={this.state.hometeamValue} onChange={this.handleChangeHomeTeam}>
      <option value="Betis">Betis</option>
      <option value="Real">Real</option>
    </select>
    <select value={this.state.awayteamValue} onChange={this.handleChangeAwayTeam}>
      <option value="Betis">Betis</option>
      <option value="Real">Real</option>
    </select>
    // ...
    <Line dataKey={this.state.hometeamValue} ... />}
    <Line dataKey={this.state.awayteamValue} .../>}
  }
}