在 React Native 中从 Promise 返回 JSX答案

【问题标题】：Return JSX from Promise in React Native在 React Native 中从 Promise 返回 JSX
【发布时间】：2020-03-07 18:14:23
【问题描述】：

我想有条件地在我的 react native 应用程序中渲染组件，我已经尝试过，但似乎没有任何效果。 Invariant Violation：对象作为 React 子级无效（发现：object w 第 i 个键 {_40、_65、_55、_72}）。如果您打算渲染一组孩子，请改用数组。我不明白我在这里缺少什么

<RootContext.Consumer>
            {({handleChange, data}) => {
                let {property, currentFloor} = data
                let flag = false
                return this._getConfigDataFromFile(property, currentFloor)
                    .then(data => {
                        data.forEach(c => {
                            if (c.zone === this.props.title) {
                                flag = true
                            }
                        })

                        return (
                            <TouchableOpacity onPress={this._onPress}>
                                <View>
                                    {flag ? <SomeComponent /> : <SomeOtherComponent />}
                                </View>
                            </TouchableOpacity>
                        )
                    })
            }}
</RootContext.Consumer>

【问题讨论】：

你返回一个 promise obj (return this._getConfigDataFromFile)，它应该是一个 React 孩子。把函数拿出来放在componentdidmount之类的地方，或者用await代替then（不推荐）
为什么说await不推荐？
另外，我无法访问componentdidmount 中的data 对象，所以我认为我无法将_getConfigDataFromFile 函数移动到其他任何地方
因为你有责任在加载时在屏幕上显示某事。

标签： reactjs react-native promise jsx react-context

【解决方案1】：

原因是您需要在返回 Promise 时返回 React 组件。做类似的事情..

const App = (
     <ReactConsumer>
        <Component1 />  
     </ReactConsumder>
);

const Component1 = () => {
   React.useEffect(() => {
     const pr = await somePromise();
   }, []};

   return (
    { pr ? 
        <AnotherComponent>pr something</AnotherComponent> 
        : null or something else 
    });

你可以使用 useEffect 或类似 componentDidMount 的东西。

【讨论】：

问题是我无法访问data 之外的<RootContext.Consumer> 对象。所以我必须在渲染函数中使用_getConfigDataFromFile（现在的方式）
@PranjalGore 我已根据您的要求更新了答案。然后您可以创建一个新组件并在返回之外使用promise :)