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中而不是在render中进行获取。

Answer 2

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

通常，在这种情况下，您需要声明一个本地状态，该状态最终将被返回的数据填充并充当占位符。

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

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

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

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

2 个答案: