Javascript 当通过辅助函数进行渲染时，我得到："；对象作为React子对象无效；错误

我正在用React Native开发一个小项目。我注意到一种奇怪的情况，即当我通过助手函数呈现列表时，会出现同名错误：

对象作为子对象无效

现在这个错误通常意味着我试图渲染一个对象，但事实并非如此。我将粘贴两段代码。第一个是如何通过一个助手函数呈现数据，这是由一个错误导致的。第二个片段是如何在

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

---

原因可能是什么？

您的代码片段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>
  );
}

renderUsers=（）=>{
返回this.props.userList.map(
（{指令，地址，createdDate，_id}）=>(
{指令}。
)
);
};
...
render（）{
返回this.props.isFetchingUsers？空：(
{this.renderUsers（）}
);
}

---

您需要删除关键字

async

您的代码片段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>
  );
}

renderUsers=（）=>{
返回this.props.userList.map(
（{指令，地址，createdDate，_id}）=>(
{指令}。
)
);
};
...
render（）{
返回this.props.isFetchingUsers？空：(
{this.renderUsers（）}
);
}

---

您需要删除关键字

async

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

您应该呈现如下所示的元素：

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

render（）{
{ 
（！this.props.isFetchingUsers&&this.props.userList）&&
这是renderUsers（）
}
}

---

然后从

renderUsers

方法中删除关键字

async

。

在render方法中不应返回null

您应该呈现如下所示的元素：

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

render（）{
{ 
（！this.props.isFetchingUsers&&this.props.userList）&&
这是renderUsers（）
}
}

---

然后从

renderUsers

方法中删除关键字

async

。

async函数将返回Promise对象，该对象不应是React子对象

但是对于数组映射，您不需要

async

函数

---

如果要异步呈现某个对象，请尝试通过

this.setState

更新状态，并相应地呈现它。

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

但是对于数组映射，您不需要

async

函数

---

如果要异步呈现某个对象，请尝试通过

this.setState

更新状态，并相应地呈现它。

为什么定义

renderUsers

async？为什么定义

renderUsers

async？