React Native 多次重新渲染 3 个状态的错误

Question

错误：重新呈现太多。 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ç'
        />

Answer 1

在您分享的linked example中，处理程序代码是：

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

此 return 是一个状态设置函数，用作 onChange={onChange()} 的更改处理程序。

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

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() 以便清楚该函数不是处理程序本身；相反，它 returns/creates/makes 调用时的处理程序。

React Native 多次重新渲染 3 个状态的错误

React Native many re-renders error for 3 state

javascript

state

react-native