使用 React Hooks 更新对象的状态

Question

我正在从 Firebase 获取数据并想更新 state:

const [allProfile, setAllProfile] = useState([]);
.....
const displayProfileList = async () => {
        try {

            await profile
                .get()
                .then(querySnapshot => {

                    querySnapshot.docs.map(doc => {
                        const documentId = doc.id;                        
                        const nProfile = { id: documentId, doc: doc.data()}                        
                        console.log(nProfile);//nProfile contains data
                    
                        setAllProfile([...allProfile, nProfile]);
                        console.log(allProfile); // is empty
                    }
                    );

                })
        } catch (error) {
            console.log('xxx', error);
        }
    }

Answer 1

由于setAllProfile是异步方法，所以不能在setAllProfile后立即获取更新后的值。您应该通过添加 allProfile 依赖项将其放入 useEffect 中。

setAllProfile([...allProfile, nProfile]);
console.log(allProfile); // Old `allProfile` value will be printed, which is the initial empty array.

useEffect(() => {
  console.log(allProfile);
}, [allProfile]);

更新

const [allProfile, setAllProfile] = useState([]);
.....
const displayProfileList = async () => {
        try {

            await profile
                .get()
                .then(querySnapshot => {
                    const profiles = [];

                    querySnapshot.docs.map(doc => {
                        const documentId = doc.id;                        
                        const nProfile = { id: documentId, doc: doc.data()}                        
                        console.log(nProfile);//nProfile contains data
                        profiles.push(nProfile);
                    
                    }
                    );
                    setAllProfile([...allProfile, ...profiles]);


                })
        } catch (error) {
            console.log('xxx', error);
        }
    }

Answer 2

setAllProfile 将在迭代完成后更新状态。因此，为了让您的代码正常工作，您需要将回调函数传递给 setAllProfile，如 docs

中所示

setAllProfile((prevState) => [...prevState, nProfile])

更新

Example demonstrating this at work

Answer 3

您在 map 中调用 setState，因此创建了几个异步调用，所有调用均由当前 ..allProfile 值调用引用（而不是 prev => [...prev... )

尝试

 let arr=[]
 querySnapshot.docs.map(doc => {
                  arr.push({ id: doc.id, doc: doc.data() })
            }                                 
 setAllProfile(prev=>[...prev,  ...arr])

我不确定获取帖子的架构是如何实现的（在分页等方面，所以你可能不需要破坏 ...prev

使用 React Hooks 更新对象的状态

Update state with Object using React Hooks

state

reactjs

react-native

react-hooks

use-state