Javascript 如何使选择器组件正确地重新呈现其项？

我有两个选择器（@react native community/picker），一个用于state，另一个用于city

<StyledPicker
  key="statePicker"
  selectedValue={values.state}
  onValueChange={(value, id) => {
    setFieldValue('state', value);

    setState(values.state);
    console.log(state);
  }}
>
  {stateList.length > 0 &&
    stateList.map(stateEl => (
      <StyledPicker.Item
        key={stateEl.id}
        label={stateEl.name}
        value={stateEl.id}
      />
    ))}
</StyledPicker>

问题是，值更改后列表不会更新。 当安装表单组件并且我第一次从选择器中选择一个状态时，城市列表不会更改，并且在选择另一个状态后，列表将更新为以前的值

表单已装入，城市列表为空。我选择德克萨斯州，城市列表仍然为空。我选择密苏里州，城市列表将更新为德克萨斯州的城市

我登录控制台调试API在选择时是否返回正确的信息，并且它是正确的。当我选择德克萨斯州时，即使是第一个选择，它也会把德克萨斯州的城市还给我

---

我怎样才能使列表在状态选择后正确更新？

对于将来有同样问题的人，我已经解决了

问题是

setFieldValue

和my

setState

函数（来自

useState

）都是同步的

因此，当发生

onChangeValue

事件时，两个函数同时运行，当发生这种情况时，“State”状态的值还没有更新

---

我设法通过使用

setState（value）

和来自事件的值来修复它，而不是

setState（values.state）

来自Formik对象的值。

你有这方面的githhub repo吗？不幸的是，我使用的这个代码库和API是专有的。我将尝试用一个假的API制作一个代码片段，这会有所帮助

<StyledPicker
  key="cityPicker"
  selectedValue={values.city}
  onValueChange={(value, id) => {
    setFieldValue('city', value);
  }}
>
  {cityList.length > 0 &&
    cityList.map(cityEl => (
      <StyledPicker.Item
        key={cityEl.id}
        label={cityEl.name}
        value={cityEl.id}
      />
    ))}
</StyledPicker>

useEffect(() => {
  async function loadCities() {
    try {
      const { data } = await api.get(`/states/${state}/cities`);

      const citiesFromAPI = data.map((resCity: any) => resCity.attributes);

      setCityList(citiesFromAPI);
    } catch (err) {
      Alert.alert('Something went wrong', 'Please, try again.');
      navigation.goBack();
    }
  }

  if (state) {
    loadCities();
  }
}, [navigation, state]);