时间戳

首页 > 解决方案 > 在 React Native 功能组件中渲染之前的数据处理

reactjs - 在 React Native 功能组件中渲染之前的数据处理

问题描述

我有一个 React Native 功能组件。

我正在使用 useEffect 从 AsycStorage 获取一些数据并将其设置为本地状态。但是，在渲染之前，我想先对这些数据进行一些处理/计算，然后才能在屏幕上渲染它。我应该在哪里做这个计算？

我的屏幕如下所示：

const BasicScreen = ({ data, getPosts }) => {

  const [myItems, setItems] = useState([]);

  const checkForItems = () => {
    var storageItems = AsyncStorage.getItem("MyItems").then((item) => {
      if (item) {
        return JSON.parse(item);
      }
    });
    setItems(storageItems);
  };

  useEffect(() => {
    async function getItems() {
      await checkForItems(); // calling function to get data from storage
    }
    getItems(); // Local Storage
    getPosts(); // Store action
  }, []);

    return (
      <View>
        <>
          <Text>{JSON.stringify(processedItemsA)}</Text>
          <Text>{JSON.stringify(processedItemsB)}</Text>
        </>
      </View>
    );
}

export default BasicScreen;

如您所见，我检查 AsyncStorage 中的项目并将该数据设置为本地状态 myItems。

我想做一些数学计算和一些条件逻辑，例如，将 myItems 的数据分成两个单独的类别，然后在屏幕上渲染。processedItemsA类似于和的东西processedItemsB。我应该在哪里进行数据处理？

processedItemsA = myItems => {
// Some logic
}

processedItemsB = myItems => {
// Some logic
}

我不确定这个逻辑应该去哪里。

请注意，此处理是必需的，因为除了存储之外，我还从 redux 存储中获取了一些数据，然后将其与该数据一起处理。

标签： reactjsreact-native

解决方案

这样你就可以实现这一点

const [processedItemsA, setProcessedItemsA] = useState({});
const [processedItemsB, setProcessedItemsB] = useState({});

doProcessedItemsA = myItems => {
  ...
  setProcessedItemsA({...data}); // set data after process Item A
}

doProcessedItemsB = myItems => {
  ...
  setProcessedItemsB({...data}); // set data after process Item B
}

const checkForItems = () => {
    var storageItems = AsyncStorage.getItem("MyItems").then((item) => {
      if (item) {
        const parsedItem = JSON.parse(item);
    doProcessedItemsA(parsedItem);
    doProcessedItemsB(parsedItem);
      }
    });
    // setItems(storageItems); <-- No need to set here -->
};

推荐阅读