javascript - 状态在 react 中被覆盖

Question

  <form onChange = {handleFilterChange}>
    <select name="movie">
      <option value="default">Please choose a movie</option>
      {state.data.map(movie => (<option value={movie.title}>{movie.title}</option>))}
    </select>
    <select name="species">
      {state.appliedFilters.movie !== undefined ? [...new Set(species)].map(specie => (<option value={specie}>{specie}</option>)):
      (<option value="default">Please select a movie first)</option>) }
    </select>
  </form>

我有上面的表单和 onChange 函数:

  const handleFilterChange = (e) => {
    if(e.target.value === 'default' && state.appliedFilters !== undefined){
      setState({...state ,appliedFilters : {}});
    }else{
      setState({...state, appliedFilters:{[e.target.name] : e.target.value}})
    }
  }

当我应用电影过滤器，然后对物种进行更改时，选择电影过滤器消失，物种仅保留。

Answer 1

您已在 <form> 上设置了 onChange 处理程序而不是 <select>所以event.target和event.target.value不是您想要的(这是表单而不是选择)。

将 onChange 移至电影 <select> :

 <form>
    <select name="movie" onChange={handleFilterChange}>
      <option value="default">Please choose a movie</option>
      {state.data.map(movie => (<option value={movie.title}>{movie.title}</option>))}
    </select>
    <select name="species">
      {state.appliedFilters.movie !== undefined ? [...new Set(species)].map(specie => (<option value={specie}>{specie}</option>)):
      (<option value="default">Please select a movie first)</option>) }
    </select>
  </form>