使用 useEffect 和 asyncstorage 数据更新平面列表答案

【问题标题】：Update a flatlist with useEffect and asyncstorage data使用 useEffect 和 asyncstorage 数据更新平面列表
【发布时间】：2021-02-02 23:30:27
【问题描述】：

我有两个屏幕，第一个屏幕 (Entry.js) 就像我输入一些数据并将其保存在异步存储中的表单

const entryVehicleLocal = async ({values}) => {

    const currentDay = new Date();
    const date = String(currentDay);
    const dateSlice = date.slice(4, -15);
    const issuedDate = String(dateSlice);
    values.issuedDate = issuedDate;
            
    const id = shortid.generate();

    const valuesLocal = {
        id: id,
        issuedDate: issuedDate,
        type: values.type,
        color: values.color,
    }

    saveCar(JSON.stringify(valuesLocal));
    
}

const saveCar = async (carJSON) => {
    try {
        await AsyncStorage.setItem('car', carJSON);
        console.log('Logrado');
    } catch (error) {
        console.log(error);
    }
}

然后我有第二个屏幕（Parking.js），我想在平面列表中显示我保存在异步存储中的数据，但这是我的问题，我试图使用 useEffect 自动刷新我的数据，但是当我这样做时它只是刷新一次，然后从不更新数据，所以平面列表只显示一个元素，我想要我在第一个屏幕中输入的所有项目

const [carList, setCarList] = useState([]);

useEffect(() => {
    getStorage();
}, [setCarList]);

const getStorage = async () => {
    const newCar = await AsyncStorage.getItem('car');
    const car = JSON.parse(newCar);
    console.log(car);
    setCarList([...carList,car]);
}

希望你能帮到我

【问题讨论】：

标签： react-native react-hooks react-native-flatlist use-effect asyncstorage

【解决方案1】：

在您的平面列表组件中设置额外数据以在数据更新时重新呈现，

<FlatList ... extraData={carList}/>

【讨论】：