Question

下午好我有一个可以选择值的组件。我用一个状态控制该组件的值，并更改该状态，然后将一个函数传递给该组件。从我更改该组件的状态开始，它就更改了两次，状态触发了ID，此后ID立刻变为零。

 const [currency, setCurrency] = useState('');

 const handleChange = (event) => {
    setCurrency(event.target.value);
  };

  <TextField
    select
    value={state}
    onChange={handleChange}
    margin="normal"
    helperText="Selection value"
    fullWidth
  >
    {optionsAPI.map((option) => (
      <MenuItem key={option.id} value={option.id}>
          {option.descrition}
      </MenuItem>
    ))}
  </TextField>

Answer 1

您向state道具传递了未定义为值的value。应该改为使用currency。

<TextField
        select
        value={currency} // not state.
        onChange={handleChange}
        margin="normal"
        helperText="Selection value"
        fullWidth
      >

此外，您必须停止event bubbling。

const handleChange = (event) => {
    event.stopPropagation();
    setCurrency(event.target.value);
  };

状态改变两次反应

1 个答案: