React条件渲染与数据获取：State管理与渲染逻辑优化实践

const [state, setState] = useState({users: []});
const temporaryUsers = state.users; // temporaryUsers 引用了 state.users
useEffect(() => {
    fetch(`https://randomuser.me/api/?results=20`)
    .then(res => res.json())
    .then(json => {
      temporaryUsers.push(json); // 直接修改了 state.users 数组
      setState({
        users: temporaryUsers // 传入的是旧数组的引用，React可能无法检测到变化
      });
    });
},[])

{(() => {
  if (state.users[0] != undefined){
    state.users[0].results.map((elem) => {
      return(
        <User  props={elem} />
      )
    })
  } else{
    return (
      <p>Loading...</p>
    )
  }
})()}

// 错误示范：直接修改并传入引用
// temporaryUsers.push(json);
// setState({ users: temporaryUsers });

// 正确示范：创建新数组并更新
setState({ users: json.results }); // 假设json.results是用户数据数组

// 优化前的复杂IIFE
// {(() => { ... })()}

// 优化后的三元运算符
{state.users.length > 0 ? (
  // 渲染用户列表
) : (
  // 渲染加载状态
)}

// 错误示范：缺少key属性
// state.users.map((elem) => <User props={elem} />)

// 正确示范：添加唯一的key属性
state.users.map((elem) => <User key={elem.id} props={elem} />) // 假设elem有唯一的id

import React, { useState, useEffect } from 'react';

// 假设User组件如下
function User({ props }) {
  // 渲染单个用户的逻辑，例如显示姓名、图片等
  return (
    <div style={{ border: '1px solid #ccc', margin: '10px', padding: '10px' }}>
      <p>Name: {props.name.first} {props.name.last}</p>
      <img src={props.picture.thumbnail} alt="user" />
    </div>
  );
}

export function Main() {
  // 使用更清晰的state名称，例如直接存储用户数组
  const [users, setUsers] = useState([]); // 初始化为空数组，而不是包含空数组的对象

  useEffect(() => {
    fetch(`https://randomuser.me/api/?results=20`)
      .then(res => res.json())
      .then(json => {
        // 直接使用json.results更新state，确保不可变性
        setUsers(json.results); 
      })
      .catch(error => {
        console.error("Error fetching users:", error);
        // 可以在这里设置一个错误状态，以便渲染错误信息
      });
  }, []); // 空依赖数组表示只在组件挂载时运行一次

  return (
    <>
      {users.length > 0 ? (
        // 使用三元运算符进行条件渲染
        // 为每个User组件添加唯一的key属性，这里使用user.login.uuid作为key
        users.map((elem) => <User key={elem.login.uuid} props={elem} />)
      ) : (
        <p style={{ textAlign: "center", display: "block", width: "100%" }}>Loading...</p>
      )}
    </>
  );
}