React使用useState时fetch请求无法正常展示数据如何解决

问题根因 #

• 错误使用document.write输出对象类型数据：接口返回的json是用户对象数组，直接传给document.write会自动调用对象的toString()方法，输出的就是你看到的[object Object]内容
• React框架中禁止直接使用document.write操作DOM：这个API会清空页面已渲染的所有React节点，完全不符合React的状态驱动渲染逻辑
• 声明的User、Open状态没有被正确使用，没有对接接口返回数据的渲染逻辑

修复后可运行代码 #

import React, { useState } from 'react';

const App = () => {
    // 存储拉取的用户列表数据
    const [userList, setUserList] = useState([])
    // 对接输入框的内容状态
    const [num, setNum] = useState("")

    const fetchUsers = () => {
        fetch("https://jsonplaceholder.typicode.com/users")
          .then((response) => response.json())
          .then((json) => {
            // 把接口返回数据存入状态触发重渲染
            setUserList(json);
          });
      };


    return( <> 
        <input 
          name="Num" 
          value={num} 
          onChange={(e) => setNum(e.target.value)} 
          placeholder="请输入编号"
        />
        <button onClick={fetchUsers}> Click Me for users </button>
        {/* 遍历状态渲染用户数据 */}
        <ul>
          {userList.map(user => (
            <li key={user.id}>用户名：{user.name}，邮箱：{user.email}</li>
          ))}
        </ul>
    </>)
}

export default App

核心修改说明 #

• 移除document.write调用，通过React状态管理接口数据，实现状态驱动渲染
• 给输入框绑定了状态变更逻辑，符合React受控组件开发规范
• 新增列表渲染逻辑，遍历用户数组取出需要展示的字段输出，避免直接打印整个对象触发toString转换

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