React组件中useEffect无法渲染内容的技术问题咨询

你的组件无法正常渲染内容，核心有两个问题：

1. State初始类型与后续数据不匹配 #

你初始化movies为数组[]，但在useEffect里用setMovies设置成了包含movieList属性的对象，这会导致初始渲染时movies.movieList为undefined，即便用了可选链，类型不一致也会埋下隐患。

修复：把初始state改成和后续数据结构一致的对象：

const [movies, setMovies] = useState({ movieList: [] });

2. map回调未返回JSX元素 #

你的map函数里只是创建了<li>元素，但没有返回它，最终渲染结果为undefined，自然看不到内容。

修复：两种方式任选其一：

• 用箭头函数隐式返回（去掉大括号）
• 手动添加return语句

示例：

// 隐式返回写法
{movies.movieList?.map((m) => 
  <li key={m.id}>{m.title}</li>
)}

// 显式return写法
{movies.movieList?.map((m) => {
  return <li key={m.id}>{m.title}</li>;
})}

完整修复后的代码 #

import React, { Fragment, useEffect, useState } from "react";

export default function Movies() {
  const [movies, setMovies] = useState({ movieList: [] });

  useEffect(() => {
    setMovies({
      movieList: [
        { id: 1, title: "The Godfather" },
        { id: 2, title: "Apocalypse Now" },
      ],
    });
  }, []);
  return (
    <Fragment>
      <h2>Choose a movie</h2>
      <ul>
        {movies.movieList?.map((m) => (
          <li key={m.id}>{m.title}</li>
        ))}
      </ul>
    </Fragment>
  );
}

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