React Native many re-renders error for 3 state答案

【问题标题】：React Native many re-renders error for 3 stateReact Native many re-renders error for 3 state
【发布时间】：2022-01-12 16:21:41
【问题描述】：

错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。我的目标是在更新国家/地区时使城市数据保持新鲜。我收到此错误如何在此代码中修复它？

  const [selectedCity, setSelectedCity] = useState({})
  const [selectedCountry, setSelectedCountry] = useState({})
  const [cityData,setCityData]= useState(TurkeyCityData)
  
  function onChangeCity() {
    return (val) => setSelectedCity(val)
  }
  function onChangeCountry() {
    setCityData(`${selectedCountry.item}${'CityData'}`)
    return (val)=>setSelectedCountry(val);
  }
  //`${selectedCountry.item}${'CityData'}`

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <SelectBox
          label=''
          options={countryData}
          value={selectedCountry}
          onChange={onChangeCountry()}
          hideInputFilter={false}
          width={width/2.5}
          containerStyle={styles.selectbox}
          arrowIconColor='#5359d1'
          searchIconColor='#5359d1'
          inputPlaceholder='Ülke Seç'
        />

【问题讨论】：

onChange={onChangeCountry} 我不这样做是因为 SelectBox 必须是 onChangeCountry()
这个选择框：github.com/sauzy34/react-native-multi-selectbox
我看到了问题，谢谢。

标签： javascript react-native state

【解决方案1】：

在你分享的linked example中，处理代码是：

function onChange() {
  return (val) => setSelectedTeam(val)
}

这将返回一个状态设置函数，该函数用作onChange={onChange()} 的更改处理程序。

在您的代码中，您像他们一样返回一个处理程序，但您也立即设置状态：

function onChangeCountry() {
  setCityData(`${selectedCountry.item}${'CityData'}`) // <-- triggers rerender
  return (val)=>setSelectedCountry(val);
}

任何状态集都必须有一些条件或触发机制，否则您将获得无限的重新渲染循环。您可以使用效果或将 setter 放在处理程序回调中，这对您的应用程序逻辑更有意义：

function onChangeCountry() {
  return val => {
    setSelectedCountry(val);
    setCityData(`${selectedCountry.item}${'CityData'}`);
  };
}

顺便说一句，我不确定额外的抽象层在这里是否有意义；我只使用一个不太容易混淆的函数：

function onChangeCountry(val) {
  setSelectedCountry(val);
  setCityData(`${selectedCountry.item}${'CityData'}`);
}

并将其用于：

onChange={onChangeCountry}

或者，将函数重命名为makeOnChangeCountryHandler()，以便清楚地表明该函数不是处理程序本身；相反，它在调用时返回/创建/制作处理程序。

【讨论】：