{React Native} 状态更新后触发函数

Question

我正在努力弄清楚如何在setArr(list) 被填充后触发我的moveToResults() 函数。我觉得应该有一个简单的方法来使用new Promise 来做到这一点，但我似乎无法弄清楚。

const [arr, setArr] = useState([]);

const handlePress =  ()=>{
    var list = [];
    firebase.firestore().collection('PostedFunEvents').where("location", "==" , place).get().then((querySnapshot) =>{
        querySnapshot.forEach((doc) =>{ 
                list.push(doc.data());                                                   
            })
             setArr(list);   
        }).then(()=>{
            console.log(arr.length);
        }).then(()=>{
            moveToResults(); // AT THIS POINT ARR.LENGTH IS STILL 0
        });
}

这是我的moveToResults() 函数：

    const moveToResults = () =>{ 
        navigation.navigate('Results', {arr: arr})
    }

问题

我如何确保moveToResults()fires 一次setArr(list) 完成？

我基本上想确保当moveToResults() 被触发时arr 被填充。否则我什么也不传递到下一个屏幕。

Answer 1

在实际发生重新渲染之前，不会反映状态更新。在类组件中，setState 提供了一个回调，当状态更新完成时会调用它，但是在钩子状态更新器中没有提供这样的回调

处理此类场景的方法是利用 useEffect 并监听状态变化。但是，由于您不希望这是在 initialRender 上，因此您需要禁用 initialRender 上的效果

const [arr, setArr] = useState([]);
const initialRender = useRef(true);
useEffect(() => {
    if(!initialRender.current) {
        moveToResults()
    } else {
      initialRender.current = false;
    }

}, [arr]) // Listening on arr change


const handlePress =  ()=>{
    var list = [];
    firebase.firestore().collection('PostedFunEvents').where("location", "==" , place).get().then((querySnapshot) =>{
        querySnapshot.forEach((doc) =>{ 
                list.push(doc.data());                                                   
            })
             setArr(list);   
        })
}

但是，上述解决方案仅适用于仅通过 handlePress 操作更新 arr 或者您想在数组发生更改时随时导航的情况。如果数组是从其他地方更新的，并且您不希望在每次数组更改时都执行导航，则不能使用上述方法

处理此类场景的正确方法是不依赖状态更新，而是直接将参数传递给 moveToResults

const [arr, setArr] = useState([]);

const handlePress =  ()=>{
    firebase.firestore().collection('PostedFunEvents').where("location", "==" , place).get().then((querySnapshot) =>{
        var list = [];
        querySnapshot.forEach((doc) =>{ 
                list.push(doc.data());                                                   
            })
            return list;   
        }).then((list)=>{
            moveToResults(list); 
        });
}

const moveToResults = (list) =>{ 
    navigation.navigate('Results', {arr: list})
}

通过编写函数moveToResults 来接受参数，您可以在任何地方使用它并依赖于传递更新的状态，而不是等待它使用来自状态的值。

Answer 2

使用querySnapshot.docs返回的数组设置状态：

const [arr, setArr] = useState([]);

// This callback will be called after 'arr' get elements.
React.useEffect(() => {
  if (arr.length > 0) {
    moveToResults(arr); // go!
  }
}, [arr]);

const handlePress = () => {
  firebase.firestore().collection('PostedFunEvents').where("location", "==" , place).get()
  .then((querySnapshot) => {
    console.log(querySnapshot.docs); // debug array

    setArr(querySnapshot.docs); // setting list

    // moveToResults(querySnapshot.docs); // go!
  });
}

Answer 3

为什么不使用 redux，在这种情况下会有很大帮助？
不管怎样，我在想，是这样的：

const [arr, setArr] = useState([]);

    const handlePress = () => {
       firebase.firestore()
               .collection('PostedFunEvents')
               .where("location", "==" , place)
               .get()
               .then(snapshot => {

        let list = [];

        if (snapshot.empty) {
          throw new Error('No location here.');
        }  

        snapshot.forEach(doc => {
          list.push(doc);
        });

        if (snapshot.length === list.length) {
          setArr(list)
        }
      })
      .catch(err => {
         console.log('Error getting documents', err);
      });
}

我希望它有所帮助，或者至少它有效

Answer 4

您可以在 firebase 操作完成中使用异步等待，而不是使用多个 .then() 块，即

firebase.firestore().collection('PostedFunEvents').where("location", "==" , place).get().then(async (querySnapshot) =>{
 await querySnapshot.forEach((doc) =>{ 
            list.push(doc.data());                                                   
        })
         setArr(list);   
    })
 .catch(err=>{
console.log(err)
 })

Answer 5

arr 变量在你的组件重新渲染之前不会被填充，因此你不能在同一个承诺链中调用moveToResults。但是，这应该是在填充 arr 然后调用函数时进行的简单检查。

const [arr, setArr] = useState([]);
useEffect(() => {
  if (arr.length > 0) {
    moveToResults(arr);
  }
}, [arr])

const handlePress =  ()=>{
    var list = [];
    firebase.firestore().collection('PostedFunEvents').where("location", "==" , place).get().then((querySnapshot) =>{
            querySnapshot.forEach((doc) =>{ 
                list.push(doc.data());                                                   
            })
             // Use concat because it returns a new array which will allow react to detect a state change
            setArr(arr.concat(list));   
        });
}

Answer 6

我们可以编写自定义函数，如果状态发生任何变化，它将调用回调函数

然后你可以从回调中触发函数

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const useStateCallbackWrapper = (initilValue, callBack) => {
  const [state, setState] = useState(initilValue);
  useEffect(() => callBack(state), [state]);
  return [state, setState];
};

const callBack = state => {
  console.log("---------------", state);
};
function App() {
  const [count, setCount] = useStateCallbackWrapper(0, callBack);
  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 7

试试这个家伙。 setArr 和 navigation 只能在列表可用后调用。

const handlePress = async () => {

  const myPromise = new Promise((resolve, reject) => {
    const list = [];
    firebase
        .firestore()
        .collection('PostedFunEvents')
        .where("location", "==", place)
        .get()
        .then((querySnapshot) => {
          querySnapshot.forEach(doc =>
              list.push(doc.data()
              ));
          resolve(list);
        }).catch(reject);
  });

  try {
    const myList = await myPromise();
    console.log(myList);
    setArr(list);
    navigation.navigate('Results', {arr: myList});
  } catch (e) {
    console.log(e)
  }
}