延迟useEffect，直到useSelector从React Native中的Redux存储中检索数据

Question

我有一个功能性的react组件Tasks_1，最初，我想从redux存储成功地检索userId。

在此之后，我想使用从redux存储中检索到的userId在useEffect中从后端获取数据。

当useEffect运行时，它说从状态id中检索到一个空字符串。如何使useEffect在状态"id"之后运行?是从存储中检索它的useState设置的吗?

function Tasks_1 () {

const [id, setId] = useState('');

const userId = useSelector((state) => state.id);
const [tasks, setTasks] = useState([]);

useEffect(() => {
setId(userId);

if (id !== '') {
db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
const tempTasks = [];
snapshot.forEach(
doc => {
tempTasks.push(doc.data());
}
)
setTasks(tempTasks);
});
}

}),[id];

return (
...
)
}

Answer 1

如果你让它按照你的方式工作，你可能会得到一个无限循环。使用setId更新id将导致重新渲染，并且因为您更改了id，因此将再次调用useEffect ....

我相信这是可行的:

const [id, setId] = useState('');
const userId = useSelector((state) => state.id);
const [tasks, setTasks] = useState([]);
useEffect(() => {
// this will make sure you only set id when userId
// is a valid value, and it won't reset it every
// serenader
if(userId!=='' && id !== userId)
setId(userId);
if (id !== '') {
db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
const tempTasks = [];
snapshot.forEach(
doc => {
tempTasks.push(doc.data());
}
)
setTasks(tempTasks);
});
}
}, [id, userId]);

，您必须将userId添加到数组依赖项中。