React渲染POST请求返回数组遇问题：useState未更新、请求无限循环

1. 初始代码中list看似未更新的原因 #

• setList 是异步操作，你在setList(data)后立刻console.log("list:", list)，打印的是更新前的旧值，这是React的正常机制。可以在组件外层添加console.log(list)，或者用useEffect监听list变化，来确认数据是否真的更新。
• 检查接口返回的data结构是否匹配你的渲染逻辑：你用({item})解构数组元素，意味着返回的数组每一项必须包含item属性。如果接口返回的是纯字符串数组（比如["file1.txt", "file2.jpg"]），解构item会得到undefined，自然无法渲染内容。

2. 无限POST请求的解决办法 #

绝对不能把list加入useEffect的依赖数组——每次setList都会修改list，触发useEffect重新执行，再次发起请求并更新list，形成无限循环。正确做法：

• 保持依赖数组为空[]，让useEffect仅在组件挂载时执行一次，发起单次请求。
• 如果需要在特定条件下重新请求（比如参数变化），只将变化的参数加入依赖数组，而非list本身。

修正后的示例代码 #

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

const ShowFiles = () => {
    const [list, setList] = useState([])

    useEffect( () => {     
        fetch("https://--------------/getFiles", {
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            crossDomain: true,
        })
        .then(results => results.json())
        .then(data => {
            console.log("接口返回数据:", data);
            // 根据实际返回结构调整：
            // 如果返回是[{item: "file1"}, {item: "file2"}]，保留原解构逻辑
            // 如果返回是["file1", "file2"]，直接用item本身
            setList(data);
        })
        .catch(err => {
            console.error("请求出错:", err);
        })
    },[])

    // 注意用单个ul包裹所有li，而非每个元素生成独立ul
    return (
        <div>
            <ul>
                {list.map((item, index) => (
                    // 优先用数据的唯一标识作为key，无标识时临时用index
                    <li key={index}>{item.item || item}</li>
                ))}
            </ul>
        </div>
    )
}

额外检查项 #

• 打开浏览器控制台的Network标签，确认POST请求是否成功，返回的data格式是否符合预期。
• 确认后端接口配置了正确的跨域（CORS）规则，否则会出现跨域请求失败。

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