尝试映射时，对象作为 React 子对象无效

Question

我正在尝试从我的 api 获取数据并将其呈现为列表，但它一直给我标题中提到的错误。

import React, { Component } from "react";
import "./style/list.css";
import { getEvents } from "../services/eventService";
import { thisExpression } from "@babel/types";

class Likes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      events: []
    };
  }
  async componentWillMount() {
    const { data: events } = await getEvents();
    this.setState({ events });
    console.log(events);
  }

  async getUserLikes() {
    // Get Likes TODO
    return 1;
  }

  render() {
    return (
      <div>
        <ul class="list-group">
          {this.state.events.map(event => (
            <li
              class="list-group-item d-flex justify-content-between align-items-center"
              key={event._id}
            >
              {event.title}
              <span class="badge badge-primary badge-pill">
                {this.getUserLikes()}
              </span>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default Likes;

奇怪的是，当我从渲染中删除 getUserLikes() 函数时，映射似乎有效，但是当我添加它时，它却没有。

Answer 1

问题是getUserLikes是async 。

当以async调用函数时，它将返回一个 Promise 对象，该对象不是可渲染的。

如果你想在render内部调用一些函数，它不能是async 。

即使getUserLikes不调用异步请求，如果在它前面添加async ，它也会返回一个promise对象。

您可以在下面的示例中看到这种行为。

 async function call1() { return 1; } function call2() { return 1; } // Promise Object console.log(call1()) // Actual returned value console.log(call2())

如果你想获取数据并渲染它，你应该在componentDidMount获取它，而不是在渲染中。

Answer 2

问题在于处理程序的async性质。 组件返回的语句必须是纯的。 您不能在jsx块中声明命令式代码。

通常在这种情况下，您希望声明一个本地状态，该状态最终会填充返回的数据并在此之前充当占位符。

const Component = () =>{
    const [data, setData] = useState(null)

    useEffect(() =>{
        fetch(/*..*/).then(response => setData(response))
    },[])

    return data ? data.map(/*...*/) : <div> Loading </div>
}