嘗試基於 AsyncStorage React-Native 渲染組件時，對象作為反應子對象無效

Question

我正在嘗試根據 AsyncStorage 的值有條件地渲染組件，但出現上述錯誤。 我什至嘗試將 object 轉換為數組，但效果不佳。 不知道還能做什么。

 const test = async () => { const test = await ratingCountCompleted; let result = Object.values(test); result = result.toString(); console.log(result); if(result > 1) { console.log('YUP'); return ( <InAppRating /> ) } else { console.log('NOPE') } }

Answer 1

目前正試圖幫助你解決這個問題：codesandbox ，但是在async導致問題的地方有一個奇怪的交互。

編輯：我想我發現了問題。 test function 是異步的，並返回 promise，如錯誤所示： Objects are not valid as a React child (found: [object Promise]).

解決方案：

const [resultState, setResultState] = useState(null);

const test = async () => {
    const test = await ratingCountCompleted;
    let result = Object.values(test);
    result = result.toString();
    console.log(result);

    if (result > 1) {
        console.log("YUP");

        return <Text>Hey</Text>;
    } else {
        console.log("NOPE");
        return null;
    }
};

// setResultState on load
useEffect(() => {
  test().then((component) => setResultState(component));
}, []);

return <View>{resultState}</View>;

我們必須將useState用於我們的初始組件 state，即null 。 然后我們用useEffect填充它，從test中獲取返回的 promise ，最后渲染它。

第二個代碼沙盒來測試它

Answer 2

您可以使用條件來呈現此演示中的元素。 但是你需要一些 state 來觸發重新渲染。 我希望這能幫到您：

import "./styles.css";
import React from "react";
import { View, Text } from "react-native";

export default function App() {
  const [result, setResult] = React.useState(0);
  const ratingCountCompleted = async () => 2;

  const test = async () => {
    const rating = await ratingCountCompleted();
    setResult(rating);
  };

  React.useEffect(() => {
    test();
  }, []);

  return (
    <div className="App">
      {(result > 1 && (<Text>Yup</Text>)) || (<Text>Nope</Text>)}
    </div>
  );
}

演示