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