useEffect 删除状态然后重置？反应

Question

我有一个用 React 制作的组件 Select。传递到 Select 上的 options 属性的选项取决于用户之前输入的状态。每次组件呈现时，都会检查 selectOptions 是否已经包含状态数组中的项目

      <Select
        styles={err === '' ? inputStyles : inputStylesErr}
        className="basic-single"
        classNamePrefix="select"
        isClearable={true}
        isSearchable={true}
        isMulti={true}
        placeholder={`Select or search health zones in ${province}, ${state.address.country}`}
        options={selectOptions}
        defaultValue={selectOptions.some((option) => option.value === state.healthZonesServed[0]) ? (
          state.healthZonesServed.map((zone) => {
            return { ['label']: zone, ['value']: zone }
          })
        ) : ''}
        onChange={(values) => handleAddHealthZones(values.map((value) => value.value))}
      />

  const handleAddHealthZones = (value) => {
    setState({
      ...state,
      healthZonesServed: value
    })
  }

如果用户填充了他们的 healthZonesServed 数组，然后返回并更改了他们的省（控制 selectOptions 的状态），然后返回到该组件，我需要将 healthZonesServed 数组重置为 []

我在 useEffect 中这样做。我可以在 console.log 中看到 healthZonesServed 在页面加载时重置为空数组，然后以某种方式从某处重新填充其先前的值。任何人都知道为什么会发生这种情况以及可能的解决方案吗？

  useEffect(() => {
    if (selectOptions.some((option) => option.value === state.healthZonesServed[0])) {
      return
    } else {
      setState({
        ...state,
        healthZonesServed: []
      })
      console.log('HIT')
    }
  }, [])

Answer 1

这不起作用的最可能原因是因为您在功能组件中使用了setState。尝试使用 useState hook 来管理状态，在您的情况下，将 heathZoneServed 数组设置为空数组。

const [healthZoneServed,sethealthZoneServed] = useState([]); sethealthZoneServed(value); useEffect(() => { if (selectOptions.some((option) => option.value === state.healthZonesServed[0])) { return; } else { sethealthZonesServed([]); console.log('HIT'); } }, [healthZonesServed]);

希望这对您有所帮助。

useEffect 删除状态然后重置？反应

useEffect removes state and then resets? React

reactjs

react-select

use-effect