仅在反应本机中单击 2-3 次提交按钮后才使用 AsyncStorage 存储数据答案

【问题标题】：Data getting stored using AsyncStorage only after 2-3 submit button clicks in react native仅在反应本机中单击 2-3 次提交按钮后才使用 AsyncStorage 存储数据
【发布时间】：2022-01-25 16:29:17
【问题描述】：

我在按下按钮时调用一个函数，以使用 AsyncStorage 将我的数据存储在本地存储中。

下面是我使用AsyncStorage存储数据的代码

const [saveData, setSaveData] = useState([]);

const _submit = async (text, photo) => {
  let newItem;
  
  newItem = {
    description: text,
    imageURL: photo,
  };
  setSaveData(prevList => {
    prevList = prevList || [];
    if (prevList.length < 0) {
      return newItem;
    } else {
      return [...prevList, newItem];
    }
  });
  setLocalItem();
};

const setLocalItem = async () => {
  AsyncStorage.setItem('test2', JSON.stringify(saveData))
    .then(json => console.log('success!'))
    .catch(error => console.log('error!'));
};

const getLocalItem = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('test2');
    const list = JSON.parse(jsonValue);

    console.log('list: ', list);
  } catch (e) {
    console.log('error: ', e);
  }
};

<TouchableOpacity
  onPress={() => {
    _submit (text, photo);
  }}>
  <Text>save</Text>
</TouchableOpacity>

<TouchableOpacity
  onPress={() => {
    getLocalItem();
  }}>
  <Text>get item</Text>
</TouchableOpacity>

我的数据正在被存储，但只有在我多次单击save 按钮之后。但是在控制台中，即使我只单击一次save 按钮，我也会收到success。但是当我点击get item 按钮时，如果save 仅被点击一次，我会在控制台中获得null。

我不知道为什么我必须多次点击save 来存储我的数据。

【问题讨论】：

标签： javascript reactjs react-native async-await asyncstorage

【解决方案1】：

您错误地更新了状态。并且新状态将在下一次渲染中可用，因此应在状态更新后调用setLocalItem。

const [saveData, setSaveData] = useState([]);

// this effect updates the storage whenever `saveData` changes
useEffect(() => {
    AsyncStorage.setItem('test2', JSON.stringify(saveData))
    .then(json => console.log('success!'))
    .catch(error => console.log('error!'));
}, [saveData])

const _submit = (text, photo) => {
  const newItem = {
    description: text,
    imageURL: photo,
  };

  // no conditions are required here as the initial state is an array
  setSaveData(prevList => [...prevList, newItem]);
};


const getLocalItem = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('test2');
    const list = JSON.parse(jsonValue);

    console.log('list: ', list);
  } catch (e) {
    console.log('error: ', e);
  }
};

【讨论】：