Hook 和 AsyncStorage 加載 FlatList 的問題

Question

我的應用程序中有 2 個屏幕，一個屏幕有一個表單，用戶可以在其中存儲它在 AsyncStorage 中填寫的數據，這個屏幕讀取保存在 AsyncStorage 中的所有數據，並應在 FlatList 中顯示數據。 這里的問題是什么都沒有呈現，屏幕是空白的。 我不知道問題出在哪里，因為如果您閱讀代碼，console.log(productosData) 實際上會在我的命令行中返回完全相同的結果結構。 所以 productosData 加載沒有問題，但由於某種原因，這不起作用。

export default function TestScreen () {

    const [productosData, setproductosData] = useState([]);        

    const ItemView = ({item}) => {
      return (
        <View>
          <Text>
            {item}
          </Text>
        </View>
      );
    };

    useEffect( () => { 
        async function cargarEnEstado() { 
          const keys = await AsyncStorage.getAllKeys();  
          const result = await AsyncStorage.multiGet(keys);  
          //result = [["a","b"],["c","d"],["e","f"],["g","h"]]
          result.forEach(element => (setproductosData(productosData.push(element))));
          console.log(productosData);
        }
        cargarEnEstado()
    },[])

    return (
      <View style={styles.container}>

      <FlatList
        data={productosData}
        renderItem={ItemView}
      />

      </View>
    );
};

const styles = StyleSheet.create({
  container: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

所以我可能認為問題出在我的 FlatList 然后我決定拿出我的 FlatList 並用文本測試鈎子但是當我在文本中使用 {productosData} 時屏幕顯示一個與第一個數組的長度相對應的數字結果。 所以在這種情況下，我在屏幕上看到 4 因為結果和 productosData 都具有這種結構 [["a","b"],["c","d"],["e","f"] ,["g","h"]] 第一個數組的長度為 4。

export default function TestScreen () {

    const [productosData, setproductosData] = useState([]);        

    const ItemView = ({item}) => {
      return (
        <View>
          <Text>
            {item}
          </Text>
        </View>
      );
    };

    useEffect( () => { 
        async function cargarEnEstado() { 
          const keys = await AsyncStorage.getAllKeys();  
          const result = await AsyncStorage.multiGet(keys);  
          //result = [["a","b"],["c","d"],["e","f"],["g","h"]]
          result.forEach(element => (setproductosData(productosData.push(element))));
          console.log(productosData);
        }
        cargarEnEstado()
    },[])

    return (
      <View style={styles.container}>

         <Text> {productosData} </Text>

      </View>
    );
};

const styles = StyleSheet.create({
  container: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

有什么建議么？ 先感謝您。

Answer 1

沒有被渲染的原因是因為element是一個字符串數組['a','b'] ，如果我理解正確的話。 嘗試將您的 itemView 更改為此

const ItemView = ({item}) => {
      return (
        <View>
          <Text>
            {item[0]+ ' , ' + item[1]}
          </Text>
        </View>
      );
    };

另外，您的 useEffect 不是很干凈。 請注意，React 中的 state 是不可變的。 通過調用productosData上的push ，您正在改變 state。首先，創建 state 的淺表副本，然后將您的新對象推送到副本中。 只有這樣你才會更新你的 state。

然而，沒有理由迭代你的結果，只是將它們散布在 state 上，就像這樣：

  async function cargarEnEstado() { 
  
          const keys = await AsyncStorage.getAllKeys();  
          const result = await AsyncStorage.multiGet(keys);  
          //result = [["a","b"],["c","d"],["e","f"],["g","h"]]
    
          setProductosData([...productosData, ...result])
         
          console.log(productosData); // Also state is async, so this might not log the correct value
        }