尝试基于 AsyncStorage React-Native 渲染组件时，对象作为反应子级无效

Posted 2023-02-23

【中文标题】尝试基于 AsyncStorage React-Native 渲染组件时，对象作为反应子级无效

【英文标题】：objects are not valid as a react child when trying to render component based off of AsyncStorage React-Native

【发布时间】：2021-07-08 03:00:02

【问题描述】：

我正在尝试根据 AsyncStorage 的值有条件地渲染组件，但出现上述错误。我什至尝试将对象转换为数组，但效果不佳。不知道还能做什么。

 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')
      
    

【参考方案1】：

目前正在尝试通过 codesandbox 帮助您解决此问题，但在 async 导致问题的地方有一个奇怪的交互。

编辑：我想我找到了问题所在。 test 函数是异步的，并返回如错误所示的承诺：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 作为我们的初始组件状态，即null。然后我们用useEffect填充它，从test获取返回的promise，最后渲染它。

A second codesandbox to test it

【讨论】：

当然，感谢您的帮助。我确实将上面的内容更新为我在此之后尝试过的内容。我尝试将数组转换为字符串，但它不喜欢这样仍然会出错。

没问题！我想我找到了解决方案，如果可行，请告诉我。看起来有点笨拙，但我相信 useEffect 路线在 react-native 中始终是最佳的。

是的，这很有效，我很感激！这是一个非常有帮助的答案

【参考方案2】：

您可以使用条件来呈现此演示中的元素。但是你需要一些状态来触发重新渲染。希望对您有所帮助：

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

Demo