Блог

У меня есть компонент, созданный с помощью React Select. Параметры, переданные в опцион параметров при выборе, зависят от состояния, которое пользователи ввели ранее. Каждый раз при отрисовке компонента выполняется проверка того, включает ли selectOptions уже элементы из массива состояний

 lt;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) =gt; option.value === state.healthZonesServed[0]) ? (  state.healthZonesServed.map((zone) =gt; {  return { ['label']: zone, ['value']: zone }  })  ) : ''}  onChange={(values) =gt; handleAddHealthZones(values.map((value) =gt; value.value))}  /gt;  

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

Если пользователь заполнил свой массив healthZonesServed, а затем вернулся и изменил свою область (часть состояния, которая управляет вариантами выбора), а затем вернулся к этому компоненту, мне нужно, чтобы массив healthZonesServed был сброшен в []

Я делаю это с пользой. Я могу видеть в своей консоли.регистрируйте сбросы healthZonesServed в пустой массив при загрузке страницы, а затем каким-то образом повторно заполняйте его предыдущие значения откуда-то. У кого-нибудь есть какое-либо представление о том, почему это происходит, и о возможном решении?

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

Наиболее вероятная причина, по которой это не работает, заключается в том, что вы используете setState в функциональном компоненте. Попробуйте использовать хук useState для управления состоянием, в вашем случае установив для массива heathZoneServed значение пустой массив.

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

Надеюсь, это было полезно.