当 2D 数组中的元素在 react native expo 中发生变化时重新渲染页面

Question

I want to re-run the code below to reload the page whenever the value inside the invitation[1][1] changes, I update these array values using the AsyncStorage in another page, when I tried the following I got the error below. Is there any other way to do so?

const [invitation, setInvitation] = React.useState(Array.from({length: 2},()=> Array.from({length: 2})));

  React.useEffect(()=>
  {
     getUserId();

  },invitation[1][1]);

    async function getUserId() {
      var keys = ["invitationFromURL","Alert"]
      try {
        await AsyncStorage.multiGet(keys , (err, item) => 
        {
          setInvitation(item);
        });
      } catch (error) {
        // Error retrieving data
        console.log(error.message);
      }
    }  


  console.log(invitation);
  console.log(invitation[1][1]);

The error I get Warning: %s received a final argument during this render, but not during the previous render. Even though the final argument is optional, its type cannot change between renders.%s, useEffect

Answer 1

I'm guessing you have something like

const [invitation, setInvitation] = useState([[], []]);

up at the top of your component. That means on the first useEffect run invitation[1][1] will be null. On second run it will have a value. This is not kosher in React Native. When you call useEffect the final argument must have the same type every time the component renders.

Should be a simple fix -- instead of

useEffect(() => {
    getUserId();
  }, invitation[1][1]);

do

useEffect(() => {
    getUserId();
  }, invitation);