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

Question

I'm trying to fetch data from my api and render it as a list but it keeps giving me the error mentionned in the title.

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;

Weirdly enough though , it seems when i remove the getUserLikes() function from the render the mapping works but when i add it, it doesn't.

Answer 1

The problem is that getUserLikes is async .

When calling a function as async , it will return a Promise object, which isn't a renderable.

If you want to call some function inside render , it can't be async .

Even if getUserLikes doesn't call an async request, if you add async in front of it, it will return a promise object.

You can see this behavior in the example bellow.

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

If you want to fetch data and render it, you should fetch it in componentDidMount , not inside render.

Answer 2

The problem is the async nature of your handler. The returned statement of a component must be pure. You can't declare imperative code inside a jsx block.

Usually in cases like that you want to declare a local state which eventually gets filled with the returned data and acts like a placeholder until then.

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

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

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