[英]Using axios doesn't rerender my React Native component
我在 React Native 中使用钩子。 这是我的代码:
useEffect(() => {
if (var1.length > 0 ){
let sym = [];
var1.map((items) => {
let count = 0;
state.map((stateItems) => {
if(items === stateItems.name) {
count = count + 1;
}
})
if (count === 0) {
sym.push(items)
}
});
async function getAllStates (sym) {
let stateValues = [];
await Promise.all(sym.map(obj =>
axios.get(ServerURL + "/note?name=" + obj).then(response => {
stateValues.push(response.data[0]);
})
)).then(() =>{
setNewItem(stateValues);
});
}
getAllStates (sym);
}
}, [var1]);
useEffect(() => {
let stateValues = state;
for( let count = 0 ; count < newItem.length; count++ ){
stateValues.push(newItem[count]);
}
setState(stateValues);
}, [newItem]);
这成功运行,没有任何错误。 但是,当 state 显示如下时,我没有看到 state 中添加的最新值。它显示了所有以前的值。 当我刷新整个应用程序时,我能够看到我的附加值。
return (
<View style={styles.container}>
<Text style = {{color:"white"}}>
{
state.map( (item, key) =>{
return(
<Text key = {key} style = {{color:"white"}}> {item.name} </Text>
)
})
}
</Text>
</View>
);
有人能告诉我为什么会这样吗? 我想在 axios 调用后立即看到数据呈现。 我正在使用 React Native。
当我强制更新时使用: stackoverflow.com/questions/53215285/...它工作正常。 但是,如果有人可以提供,我正在寻找更好的解决方案?
这应该做:
useEffect(() => {
var1.forEach(async (name) => {
if (state.some(item => item.name === name)) return;
const response = await axios.get(ServerURL + "/note?name=" + name);
setState(state => [...state, response.data[0]]);
});
}, [var1]);
我仍然在您的方法中看到两个问题:
在将第一个 ajax 请求的结果添加到state
之前,此代码可能会多次启动相同的 ajax 请求; 这也意味着相同name
的结果可能会多次添加到state
中。
对于 var1 的每一项乘以 state 的每一项,这是一个O(n*m)
问题,或者在这种情况下基本上是O(n²)
,因为m
很快赶上n
。 你应该在这里找到更好的方法。
而且我几乎可以肯定[var1]
在这里作为useEffect
的依赖项是错误的。 但是您也需要显示此值的来源才能解决该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.