代码之家 › 专栏 › 技术社区 › James

当通过助手函数进行渲染时,我得到:“Objects is not valid as a React child”错误

react-native reactjs javascript

James · 技术社区 · 6 年前

我正在开发一个小项目。我注意到一种奇怪的情况,当我通过helper函数呈现列表时,会出现同名错误:

对象作为子对象无效

现在这个错误通常意味着我试图渲染一个对象,但事实并非如此。我将粘贴两段代码。第一个问题是如何通过一个helper函数呈现数据,这是由一个错误导致的。第二个片段是如何直接在 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() {
    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>
    );
  }

原因是什么?

3 回复 | 直到 6 年前

Adeel Imran 6 年前

你的代码片段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

ramki 6 年前

异步函数将返回Promise对象,该对象不应是React子对象。

但你不需要 async 数组映射的函数。

如果你想渲染一些东西 asynchronously 尝试更新状态 this.setState

Soroush Chehresa TommyF 6 年前

在render方法中不应该返回null!

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

async 从 renderUsers