Reactjs React本机功能组件中呈现前的数据处理

我有一个反应本机功能组件

我正在使用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;

我不确定这种逻辑应该走向何方

---

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

这样您就可以实现这一点

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

const[processedItemsA，setProcessedItemsA]=useState（{}）；
const[processedItemsB，setProcessedItemsB]=useState（{}）；
doProcessedItemsA=myItems=>{
...
setProcessedItemsA（{…data}）；//在进程项A之后设置数据
}
doProcessedItemsB=myItems=>{
...
setProcessedItemsB（{…data}）；//在进程项B之后设置数据
}
常量checkForItems=（）=>{
var storageItems=AsyncStorage.getItem（“MyItems”）。然后（（item）=>{
如果（项目）{
const parsedItem=JSON.parse（项）；
doProcessedItemsA（parsedItem）；
doProcessedItemsB（parsedItem）；
}
});
//设置项（存储项）；
};

您可以做的是创建另一个

setState（）

从

myItems

读取数据，然后使用这些函数进行处理，然后使用较新的

setState（）

进行设置。但是我不能在功能组件中使用setState，或者可以吗？您是在函数

checkForItems（）中进行设置的

useMemo

是一个不错的选择。它与呈现一起运行，而

useffect

在呈现之后运行。如果从异步存储而不是回调获取数据，则使用异步等待。var storageItems=await AsyncStorage.getItem（“MyItems”）；然后，您将拥有storageItems中的所有数据，并在同一个函数中相应地对其进行处理。那么，可以从useffect调用checkForItems函数吗？是的，就是从那里调用吗？我可以按照上面某个人的建议用async wait重新构造这个函数吗？我尝试过这样做，但出现了一些问题，数据仍然未设置。是的，请尝试使用async

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