Javascript 更改“选择”时组件未渲染

每当我更改select中的值时，我都必须显示不同的图形

• 如果我选择

  条形图

  ，它应该显示条形图
• 如果我选择

  line

  ，它应该显示折线图

最初该值为零，因此它显示条形图，然后当我更改为线条时，它工作正常，但当我返回到条形图时，它不工作

代码：

const[chart，setChart]=useState（0）
常量[filterData，setFilterData]=useState（[]）
导出常量图表类型=[
{
值：0，
标签：“酒吧”
},
{
价值：1，
标签：“行”
},
{
价值：2，
标签：“散点图”
},
//我的选择组件
常量handleChartChange=（事件）=>{
集合图表（事件.目标.值）
}
图表
{ChartTypes.map（（e，chart）=>{
返回(
{e.label}
)
})}
{/* 
*/}
//组件的条件呈现
{图表===0？：
}

编辑

---

谢谢，它是在以下答案的支持下工作的

您的问题是

event.target.value

的值将是一个字符串

“0”

，而不是您在

图表===0

检查中检查的数字

0

初始值有效，因为您将零硬编码为数字

选择1 您可以通过执行

chart==0

或

选择2 您可以将

图表类型

数组中的

值

更改为字符串：

导出常量图表类型=[
{
值：“0”，
标签：“酒吧”
},
{
值：“1”，
标签：“行”
},
{
值：“2”，
标签：“散点图”
}
];

并使初始值

const[chart，setChart]=useState（'0'）

或

选择3 您可以更改

handleChartChange

函数以将值解析为数字：

const handleChartChange = (event) => {
  setChart(parseInt(event.target.value));
}

---

您的问题是

event.target.value

的值将是一个字符串

“0”

，而不是您在

图表===0

检查中检查的数字

0

初始值有效，因为您将零硬编码为数字

选择1 您可以通过执行

chart==0

或

选择2 您可以将

图表类型

数组中的

值

更改为字符串：

导出常量图表类型=[
{
值：“0”，
标签：“酒吧”
},
{
值：“1”，
标签：“行”
},
{
值：“2”，
标签：“散点图”
}
];

并使初始值

const[chart，setChart]=useState（'0'）

或

选择3 您可以更改

handleChartChange

函数以将值解析为数字：

const handleChartChange = (event) => {
  setChart(parseInt(event.target.value));
}

---

试试这个方法，对我来说很有效

//define the state in this way:
const [state,setSate]=useState({chart:0})
const handleChartChange = (e) => {
      setState({...state, chart:e.target.value})
}

<Select
       ...
       value={state.chart}
       onChange={handleChartChange}
       ...
       >
</Select>

//用以下方式定义状态：
const[state，setstate]=useState（{chart:0}）
常量handleChartChange=（e）=>{
setState（{…状态，图表：e.target.value}）
}

试试这个方法，它对我有用

//define the state in this way:
const [state,setSate]=useState({chart:0})
const handleChartChange = (e) => {
      setState({...state, chart:e.target.value})
}

<Select
       ...
       value={state.chart}
       onChange={handleChartChange}
       ...
       >
</Select>

//用以下方式定义状态：
const[state，setstate]=useState（{chart:0}）
常量handleChartChange=（e）=>{
setState（{…状态，图表：e.target.value}）
}

handleChartChange的代码在哪里？请检查，更新了问题这是您的问题。您正在将字符串值传递给

设置图表

，但通过

图表===0

检查类型。不，dominik，我的select组件工作正常，我已经提到它适用于其中一种情况“最初，该值为零，因此它显示条形图，然后当我更改为线条时，它工作正常，但当我返回到条形图时，它不工作。”，但它不工作最初，您将0设置为状态中的数字，因此首先它工作。但当再次从线条图更改为条形图时，您的状态将为“0”，因此当它比较“0”时“==0它将返回false。

handleChartChange

的代码在哪里？请检查，更新了问题存在您的问题。您正在将字符串值传递给

setChart

，但通过

chart==0

检查类型。不，dominik，我的select组件工作正常，我已经提到它适用于其中一种情况“最初，该值为零，因此它显示条形图，然后当我更改为线条时，它工作正常，但当我返回到条形图时，它不工作。”，但它不工作最初，您将0设置为状态中的数字，因此首先它工作。但当再次从线条图更改为条形图时，您的状态将为“0”，因此当它比较“0”时"===0它将返回false。我认为这个条件

图表===0

也需要更改，对吗？我在这里说明了三个可行的选项。其中一个选项确实是将条件更改为

图表==0

谢谢@Dominik，非常感谢它的工作，Dominink会帮助我，我有三个图表，现在我如何编写co如果选择了值“3”，则显示散点图无需担心，请随意向上投票并标记为答案，以给我他们假想的互联网点。我无法向上投票，我没有声誉。我认为此条件

图表===0

也需要更改，对吗？我在这里说明了三个可行的选项。其中一个选项确实有效将条件更改为

chart==0

thank@Dominik，非常感谢，Dominink会帮助我，我有三张图，现在如何编写条件，以便在选择值“3”时绘制散点图无需担心，可以自由投票并标记为答案，给我他们想象的互联网点我不能upv注意，我没有声誉这不能解决OP had的问题这不能解决OP had的问题