时间戳

首页 > 解决方案 > 更改选择时组件未呈现

javascript - 更改选择时组件未呈现

问题描述

每当我更改选择中的值时，我都必须显示不同的图表

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

代码：

const [chart,setChart]=useState(0)
const [filterData, setFilterData] = useState([])
export const ChartTypes =[
  {
    value: 0,
    label: 'Bar'
  },
  {
    value: 1,
    label: 'Line'
  },
  {
    value: 2,
    label: 'Scatter Plot'
  },

// My select Component

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


<FormControl variant="filled" className={classes.formControl}>
  <InputLabel htmlFor="filled-age-native-simple">Chart</InputLabel>
  <Select
    native
    value={chart}
    onChange={handleChartChange}
    inputProps={{
      name: 'Chart',
      id: 'filled-age-native-simple',
    }}
  >
   {ChartTypes.map((e,chart)=>{
     return (
       <option value={e.value} key={e}>
         {e.label}
     </option>
     )
    })}
  </Select>

    {/* </Col>
    <Col> */}
</FormControl>

// conditional rendering the component


    {chart === 0 ? <BarChart
      graphData={filterData}
      filterType={graphFilter}
    /> : <LineChart
      graphData={filterData}
      filterType={graphFilter} />
  }

编辑

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

标签： javascriptreactjsreact-hooks

解决方案

您的问题是 的值event.target.value将是一个字符串"0"，而不是0您在chart === 0支票中检查的数字。

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

选项1

您可以通过执行更改检查以不包括类型chart == 0

或者

选项 2

您可以将数组中的 更改value为ChartTypes字符串：

export const ChartTypes = [
  {
    value: '0',
    label: 'Bar'
  },
  {
    value: '1',
    label: 'Line'
  },
  {
    value: '2',
    label: 'Scatter Plot'
  }
];

并使您的初始值const [chart, setChart] = useState('0')

或者

选项 3

您可以更改handleChartChange函数以将值解析为数字：

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

推荐阅读