React Native State Management 问题 - useState hook 何时加载?
React Native State Management Question - when does useState hook load?
我有一个 FlatList 项目,旁边有一个 "remove" 按钮。
当我单击删除按钮时,我可以从后端删除该项目,但实际的列表项目并没有从视图中删除。
我正在使用 useState 挂钩,据我了解组件会在 setState 发生后重新呈现。
The setState function is used to update the state. It accepts a new
state value and enqueues a re-render of the component.
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
setLocationsNames(thirdTimesACharmName);
setLocations(thirdTimesACharmLoc);
};
这归结为改变相同的 locations
数组并再次使用相同的数组调用 setState
,这意味着作为纯组件的 FlatList
不会重新渲染因为 locations
的身份没有改变。您可以先将 locations
数组复制到 newLocationsArray
(与 newLocationNameArray
类似)以避免这种情况。
var newLocationsArray = locations.slice();
var newLocationNameArray = locationsNames.slice();
我有一个 FlatList 项目,旁边有一个 "remove" 按钮。
当我单击删除按钮时,我可以从后端删除该项目,但实际的列表项目并没有从视图中删除。
我正在使用 useState 挂钩,据我了解组件会在 setState 发生后重新呈现。
The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component. 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
setLocationsNames(thirdTimesACharmName);
setLocations(thirdTimesACharmLoc);
};
这归结为改变相同的 locations
数组并再次使用相同的数组调用 setState
,这意味着作为纯组件的 FlatList
不会重新渲染因为 locations
的身份没有改变。您可以先将 locations
数组复制到 newLocationsArray
(与 newLocationNameArray
类似)以避免这种情况。
var newLocationsArray = locations.slice();
var newLocationNameArray = locationsNames.slice();