React中条件渲染无法展示Fetch获取元素的问题求助

核心问题1：直接修改原数组导致React无法检测状态变化 #

你将state.users赋值给temporaryUsers，这属于引用赋值，temporaryUsers.push(json)直接修改了原state数组。后续setState传入的还是同一个数组引用，React会判定状态未发生变化，因此不会触发组件重新渲染。

核心问题2：条件渲染的匿名函数未返回map结果 #

在if分支中，你执行了state.users[0].results.map(...)，但没有将map生成的组件列表return出去，导致匿名函数最终返回undefined，自然无法渲染任何内容。

核心问题3：状态结构冗余 #

你的state用对象嵌套数组的结构完全没必要，直接用useState存储用户数组即可简化逻辑。

修正后的代码 #

export function Main(){
  // 直接用数组存储用户数据，初始为空数组
  const [users, setUsers] = useState([]);

  useEffect(() => {
      fetch(`https://randomuser.me/api/?results=20`)
      .then(res => res.json())
      .then(json => {
        // 直接取接口返回的results数组，无需修改原state
        setUsers(json.results);
      });
    },[])
  
  return(
    <>
      {/* 用三元表达式简化条件渲染，替代匿名自执行函数 */}
      {users.length === 0 ? (
        <p style={{textAlign:"center", display:"block", width:"100%"}}>Loading...</p>
      ) : (
        users.map((elem, index) => {
          // 必须给列表项添加唯一key，满足React列表渲染要求
          return <User key={index} props={elem} />;
        })
      )}
    </>
  )
}

关键修改说明 #

1. 简化状态结构：直接用数组存储用户数据，避免嵌套对象的冗余逻辑。
2. 正确更新状态：接口返回后直接提取json.results（randomuser接口的用户列表就在results字段中），通过setUsers传入新数组，确保React能检测到状态变化。
3. 优化条件渲染：用三元表达式替代匿名自执行函数，代码更直观易读。
4. 添加列表key：给map生成的每个User组件添加唯一key属性，消除React警告并提升渲染性能。

内容的提问来源于stack exchange，提问作者Никита Лямный