通过辅助函数渲染时，我得到：“对象作为React子函数无效”错误

Question

我正在React Native开发一个小项目。我注意到一种奇怪的情况，当我通过辅助函数渲染列表时，我得到了同名的错误：

对象作为React子对象无效

现在这个错误通常意味着我正在尝试渲染一个对象，但事实并非如此。我将粘贴两段代码。第一个是我如何通过辅助函数渲染数据，这是由于错误导致的。第二个片段是我如何直接在render()方法中呈现数据并成功运行。

片段＃1：通过辅助函数renderUsers()渲染 - >不起作用

  renderUsers = async () => {
    return this.props.userList.map(
      ({ instructions, address, createdDate, _id }) => (
        <Card
          title={`${moment(createdDate).format("YYYY-MM-DD HH:mm")}`}
          key={_id}
        >
          <Text style={{ marginBottom: 10 }}>{instructions}.</Text>
          <Button backgroundColor="#03A9F4" title="Ready to Help!" />
        </Card>
      )
    );
  };
  ...
  render() {
    return this.props.isFetchingUsers ? null : (
      <View style={{ flex: 1 }}>
        <ScrollView>
          {this.renderUsers()}
        </ScrollView>
      </View>
    );
  }

片段＃2：直接在render()函数内部渲染 - >工作正常

  render() {
    return this.props.isFetchingUsers ? null : (
      <View style={{ flex: 1 }}>
        <ScrollView>
          {this.props.userList.map(
            ({ instructions, address, createdDate, _id }) => (
              <Card
                title={`${moment(createdDate).format("YYYY-MM-DD HH:mm")}`}
                key={_id}
              >
                <Text style={{ marginBottom: 10 }}>{instructions}.</Text>
                <Button backgroundColor="#03A9F4" title="Ready to Help!" />
              </Card>
            )
          )}
        </ScrollView>
      </View>
    );
  }

可能是什么原因？

Answer 1

你的代码片段1应该是这样的。

renderUsers = () => {
return this.props.userList.map(
  ({ instructions, address, createdDate, _id }) => (
    <Card
      title={`${moment(createdDate).format("YYYY-MM-DD HH:mm")}`}
      key={_id}
    >
      <Text style={{ marginBottom: 10 }}>{instructions}.</Text>
      <Button backgroundColor="#03A9F4" title="Ready to Help!" />
    </Card>
  )
);
};
...
render() {
  return this.props.isFetchingUsers ? null : (
    <View style={{ flex: 1 }}>
     <ScrollView>
      {this.renderUsers()}
     </ScrollView>
    </View>
  );
}

您需要删除关键字async

Answer 2

异步函数将返回Promise Object，它不应该是React子节点。

但你不需要async函数用于Array map。

如果你想渲染一些asynchronously尝试通过this.setState更新状态并相应地渲染它。

Answer 3

你不应该在render方法中返回null！

你应该像这样渲染一个元素：

  render() {
    <View style={{ flex: 1 }}>
      <ScrollView>
        { 
          (!this.props.isFetchingUsers && this.props.userList) &&
          this.renderUsers()
        }
      </ScrollView>
    </View>
  }

然后从async方法中删除关键字renderUsers。