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

【问题标题】：useEffect removes state and then resets? ReactuseEffect 删除状态然后重置？反应
【发布时间】：2022-01-13 16:58:32
【问题描述】：

我有一个用 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')
    }
  }, [])

【问题讨论】：

标签： reactjs use-effect react-select

【解决方案1】：

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

const [healthZoneServed,sethealthZoneServed] = useState([]);
sethealthZoneServed(value);

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

希望这对您有所帮助。

【讨论】：

setState 是一个从 useContext 提供者调用的函数。它的功能是 useState Hook const { state, setState } = useContext(LocationContext);