React Native State Management Question-useState挂钩何时加载?

问题描述 投票:0回答:1

我有一个平面清单项目,旁边有一个“删除”按钮。

当我单击删除按钮时,我可以从后端删除项目,但实际的列表项目并未从视图中删除。

我正在使用useState挂钩,据我了解,在setState发生后,组件会重新渲染。

setState函数用于更新状态。它接受一个新的状态值,并重新渲染组件。https://reactjs.org/docs/hooks-reference.html

我对状态的设置和呈现方式缺少什么?

出于各种原因,我不想使用useEffect侦听器。我希望组件在位置状态更新时重新呈现....我可以肯定的是我的其他setStates都在发生这种情况....不确定我是否完全错过了setState所做的标记或是否这与setLocations()有关。

    const [locations, setLocations] = useState(state.infoData.locations);
    const [locationsNames, setLocationsNames] = useState(state.infoData.names]);

    ...

    const removeLocationItemFromList = (item) => {
      var newLocationsArray = locations;
      var newLocationNameArray = locationsNames;
      for(l in locations){
        if(locations[l].name == item){
          newLocationsArray.splice(l, 1);
          newLocationNameArray.splice(l, 1);
        } else {
          console.log('false');
        }
      }
      setLocationsNames(newLocationNameArray); 
      setLocations(newLocationsArray);
    };

    ...

    <FlatList style={{borderColor: 'black', fontSize: 16}} 
      data={locationNames} 
      renderItem={({ item }) => 
          <LocationItem
            onRemove={() => removeLocationItemFromList(item)}
            title={item}/> } 
      keyExtractor={item => item}/>

更新的循环数

const removeLocationItemFromList = (item) => {
  var spliceNewLocationArray =locations;
  var spliceNewLocationNameArray = locationsNames;
  for(f in spliceNewLocationArray){
    if(spliceNewLocationArray[f].name == item){
      spliceNewLocationArray.splice(f, 1);
    } else {
      console.log('false');
    }
  }
  for(f in spliceNewLocationNameArray){
    if(spliceNewLocationNameArray[f] == item){
      spliceNewLocationNameArray.splice(f, 1);
    } else {
      console.log('false');
    }
  }
  var thirdTimesACharmName = spliceNewLocationNameArray;
  var thirdTimesACharmLoc = spliceNewLocationArray;
  console.log('thirdTimesACharmName:: ' + thirdTimesACharmName + ', thirdTimesACharmLoc::: ' + JSON.stringify(thirdTimesACharmLoc)); // I can see from this log that the data is correct
  setFutureLocationsNames(thirdTimesACharmName); 
  setFutureLocations(thirdTimesACharmLoc);
};
react-native state react-hooks react-state-management react-state
1个回答
0
投票

这归结为更改相同的locations数组并再次使用同一数组调用setState,这意味着作为纯组件的FlatList将不会重新呈现,因为locations的标识没有改变了。您可以先将locations数组复制到newLocationsArray(与newLocationNameArray类似),以避免出现这种情况。

      var newLocationsArray = locations.slice();
      var newLocationNameArray = locationsNames.slice();
© www.soinside.com 2019 - 2024. All rights reserved.