Question

除此以外，大部分重构工作正常；

import React, { useState, useEffect } from 'react';
import ExerciseItems from './ExerciseItems'
import axios from 'axios';


export default function ExercisesList() {
 
  const [exercises, setExercises] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:5000/exercises/')
        .then(response => {
        setExercises(response.data)
        })
    }, [])

    const exerciseList = () => {
        exercises.map(currentexercise => {
            return <ExerciseItems 
                exercise={currentexercise} 
                key={currentexercise._id}
            />;
        })
    }

    return (
        <div>
           {exerciseList}
        </div>
    )
  }

原始代码如下；

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

const Exercise = props => (
  <tr>
    <td>{props.exercise.username}</td>
    <td>{props.exercise.description}</td>
    <td>{props.exercise.duration}</td>
    <td>{props.exercise.date.substring(0,10)}</td>
  </tr>
)

export default class ExercisesList extends Component {
  constructor(props) {
    super(props);

    this.state = {exercises: []};
  }

  componentDidMount() {
    axios.get('http://localhost:5000/exercises/')
      .then(response => {
        this.setState({ exercises: response.data })
      })
      .catch((error) => {
        console.log(error);
      })
  }

  exerciseList() {
    return this.state.exercises.map(currentexercise => {
      return <Exercise exercise={currentexercise} deleteExercise={this.deleteExercise} key={currentexercise._id}/>;
    })
  }

  render() {
    return (
      <div>
        { this.exerciseList() }
      </div>
    )
  }
}

接收道具的子组件只剩下几行数据来显示信息，并且已经修改了许多（有效的）代码以绕过此处的发布条件。我面临的问题是渲染exerciseList根本行不通。希望能对解决此问题有所帮助。

Answer 1

确保return内map函数的结果

exerciseList

还必须在最后一行调用const exerciseList = () => { return exercises.map((currentexercise) => {函数：

exerciseList

Answer 2

两个问题

const exerciseList = () => {
        exercises.map(currentexercise => {
            return <ExerciseItems 
                exercise={currentexercise} 
                key={currentexercise._id}
            />;
        })
    }

转换为

const exerciseList = () => {
        return exercises.map(currentexercise => {
            return <ExerciseItems 
                exercise={currentexercise} 
                key={currentexercise._id}
            />;
        })
    }

和

return (
        <div>
           {exerciseList}
        </div>
    )

到

return (
        <div>
           {exerciseList()}
        </div>
    )

尝试使用React Hooks将基于类的组件转换为功能

2 个答案: