使用 axios 不會重新呈現我的 React Native 組件

Question

我在 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。

Answer 1

當我強制更新時使用： 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的依賴項是錯誤的。 但是您也需要顯示此值的來源才能解決該問題。