React中Exercise组件作为li元素渲染时所有标题同显一行问题

• 所有exerciseName都被输出到同一个<li>（你封装的Title组件）内，多个名称挤在同一个列表项中自然不会分行
• 父组件仅渲染了一次Exercise组件，无法生成多个独立列表项
• axios回调中的res.data.map()属于无效逻辑，直接调用setDetails(res.data)即可

推荐将数据请求逻辑移到父组件，Exercise组件仅负责渲染单个练习项，拆分后职责更清晰：

1. 修改Exercise组件 #

function Exercise({ exerciseName }) {
  return (
    <Container>
      <Content>
        <Title>{exerciseName}</Title>
      </Content>
    </Container>
  );
}

const Title = styled.li``;
const Container = styled.div``;
const Content = styled.div``;

2. 修改WorkoutDetails组件 #

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';

function WorkoutDetails() {
  const { id } = useParams();
  const [exerciseList, setExerciseList] = useState([]);

  // 列表请求逻辑移到父组件
  useEffect(() => {
    axios
      .get(
        `https://localhost:5001/api/account/${localStorage.userId}/workout/${id}/exercise`
      )
      .then((res) => {
        setExerciseList(res.data);
      });
  }, [id]); // 依赖项添加id，id变化时自动重新请求数据

  return (
    <Container>
      <Background>
        <img src={workoutImageDraw()} alt="" />
      </Background>
      <Content>
        <ExerciseList>
          {/* 遍历列表生成多个独立Exercise项 */}
          {exerciseList.map((exercise) => (
            <Exercise key={exercise.id} exerciseName={exercise.exerciseName} />
          ))}
        </ExerciseList>
      </Content>
    </Container>
  );
}

const ExerciseList = styled.ul``;

临时兼容方案（不推荐） #

如果不想调整组件结构，可直接修改Exercise组件的渲染逻辑，给每个名称单独包裹Title组件：

function Exercise() {
  const { id } = useParams();
  const [details, setDetails] = useState([]);

  useEffect(() => {
    axios
      .get(
        `https://localhost:5001/api/account/${localStorage.userId}/workout/${id}/exercise`
      )
      .then((res) => {
        setDetails(res.data);
      });
  }, [id]);

  return (
    <Container>
      <Content>
        {details.map((exercise) => (
          <Title key={exercise.id}>{exercise.exerciseName}</Title>
        ))}
      </Content>
    </Container>
  );
}

内容的提问来源于stack exchange，提问作者larryfisherman