javascript - React 期望一个赋值或函数调用，但看到一个表达式

Question

我正在尝试从我的数据库渲染数据，但编译失败。

./src/components/list-pets.component.js 第 38:5 行:预期有一个赋值或函数调用，但看到的是一个表达式 no-unused-expressions

搜索关键字以了解有关每个错误的更多信息。在此处输入代码

这是我的故障组件代码

import React, { Component } from 'react';
import axios from 'axios';

export default class ListPets extends Component {

    constructor(props) {
        super(props);

        this.state = {
          pets: []
        };

    }


    componentDidMount = () => {
      this.getPets();
    };    


    getPets = () => {  
    axios.get('http://localhost:5000/pets')
      .then((response) => {
        const data = response.data;
        this.setState({ pets: data });
        console.log('Data has been received!');
      })
      .catch((err) => {
        console.log(err);
      });
}

displayPet = (pets) => {

  if (!pets.length) return null;

  return pets.map((pet, index) => {
    <div key={index}>
      <h3>{pet.name}</h3>
      <p>{pet.species}</p>
    </div>
  });


};

渲染(){

console.log('State: ', this.state);

return (

  <div className='adopt'>
    {this.displayPet(this.state.pets)}

  </div>

) } }

Answer 1

您需要在每次 pets.map 迭代中返回一个值，目前您返回的是未定义的值。

  return pets.map((pet, index) => {
    return (
      <div key={index}>
        <h3>{pet.name}</h3>
        <p>{pet.species}</p>
      </div>
    )
  });