如何使选择器组件正确地重新渲染其项目？答案

【问题标题】：How to make the picker component re-render its items properly?如何使选择器组件正确地重新渲染其项目？
【发布时间】：2020-11-19 14:52:24
【问题描述】：

我在一个表单中有两个选择器 (@react-native-community/picker)，一个用于州，另一个用于城市。

<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>

<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>

我有一个 API 可以为我提供每个州的城市列表，所以每次用户更改状态时，我都会调用一个异步函数从 API 中获取城市列表。

我为“state”字段创建了一个状态，以便在 useEffect 中使用，这就是您在状态选择器的 onValueChange 中看到“setState”函数的原因。每次我更新状态时，都会发生 api 调用并返回城市列表。

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]);

问题是，值更改后列表不会更新。当表单组件被挂载并且我第一次从选择器中选择一个州时，城市列表不会改变，在选择另一个州后，列表会更新为之前的值。

例如：表单已安装，城市列表为空。我选择德克萨斯，城市列表仍然是空的。我选择密苏里州，城市列表更新为德克萨斯州的城市。

我登录控制台调试 API 在选择时是否返回了正确的信息，并且确实如此。当我选择德克萨斯时，即使在第一选择中，它也会让我回到德克萨斯的城市。

如何使列表在状态选择后正确更新？

【问题讨论】：

你有这个的 github 仓库吗？
不幸的是，这个代码库和我使用的 API 是专有的。我会尝试使用伪造的 API 对其进行编码。
会有帮助的

标签： javascript reactjs typescript use-effect use-state

【解决方案1】：

对于以后遇到同样问题的人，我已经解决了！

问题在于setFieldValue 和我的setState 函数（来自useState）是同步的。

因此，当onChangeValue 事件发生时，两个函数同时运行，而当这种情况发生时，“State”状态的值尚未更新。

我设法通过使用 setState(value) 和来自事件的值来修复它，而不是 setState(values.state) 来自 Formik 对象的值。

【讨论】：