Question

我有一个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存储中获取了一些数据，然后将其与该数据一起进行处理。

Answer 1

这样您就可以实现

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 -->
};

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

1 个答案: