react render-对象作为React子对象无效

Question

我试图遍历渲染中的事件：

let {events} = this.props;

    if(events.length > 0) {
       const events = events.map((event) => <Text>{event.author}</Text>);
    }

    if (this.props.hasErrored) {
        return <Text>Sorry! There was an error loading the events</Text>;
    }

    if (this.props.isLoading) {
        return <Text>Loading…</Text>;
    }

    return (
        <View>
          {events}
        </View>
    );

完整的错误是：

对象作为React子对象无效（找到：带有键{events，rest_url，total，total_pages}的对象）

有任何想法吗？

Answer 1

const和let处于块范围内 ，因此问题属于您的events变量。 您可以删除属于events变量的if语句并将其移至render方法，如下所示：

const {events} = this.props;

if (this.props.hasErrored) {
  return <Text>Sorry! There was an error loading the events</Text>;
}

if (this.props.isLoading) {
  return <Text>Loading…</Text>;
}

return (
  <View>
    {events && events.length && events.map((event) => <Text>{event.author}</Text>)}
  </View>
);

Answer 2

我认为问题是：

return (
    <View>
      {events}
    </View>
);

我猜events是常规的JavaScript对象吗？ 在这种情况下，React不知道如何渲染它。

Answer 3

您将首先在if条件中创建新的事件变量。

只需在第一个if语句中删除const