Next.js提交按钮失效，无法将输入值写入JSON文件求助

核心问题梳理 #

你的代码存在多个逻辑错误，导致提交按钮无法正常工作，逐一拆解如下：

1. 表单默认提交行为未阻止

handleSubmit 函数里没有阻止表单默认的页面刷新行为，点击提交后页面直接重载，后续逻辑根本无法执行。必须添加 e.preventDefault() 来拦截默认行为。

2. 客户端无法直接修改JSON文件

你直接修改导入的 PcosData 是无效的：React客户端代码没有权限操作服务器或本地文件系统，这种修改仅存在于内存中，刷新页面就会丢失。如果要持久化写入JSON文件，必须通过后端接口处理，前端只负责把更新后的数据发送给后端。

3. 状态初始化与更新逻辑矛盾

• 你初始化 title 和 time 时，取的是 PcosData["pcos-first"].title，但后面又对 PcosData["pcos-first"] 调用 .map()，说明它应该是一个数组——数组本身没有 title 属性，这里会直接报错。
• onChange 里用 setTitle({text: e.target.value}) 把状态改成了对象，但初始状态是字符串（假设原JSON里title是字符串），类型不统一会导致后续赋值混乱，应该直接存字符串值：setTitle(e.target.value)。

4. 表单渲染与状态绑定逻辑错误

• 循环生成的每个表单共享同一个 title 和 time 状态，输入内容会互相干扰，每个条目应该单独管理自己的状态。
• input 的 name 属性用了动态的 title 变量，会导致name变成输入的内容，应该设为固定字段名如 "title"、"time"。
• defaultValue 绑定了循环项的 pcosdata.title，但 onChange 却修改全局状态，逻辑不匹配，应该让每个输入框的变化直接对应自身条目的状态。

修复后的示例代码 #

假设 PcosData["pcos-first"] 是包含多个条目（每个条目有 id/title/time）的数组，修复后的代码如下：

import PcosData from "/data/pcos.json"; 
import { useState } from "react";

export default function AdminPcos() {
    // 将数组数据转为可单独管理的状态列表
    const [pcosItems, setPcosItems] = useState(PcosData["pcos-first"]);

    const handleSubmit = (e, itemId) => {
        e.preventDefault();
        // 这里需要调用后端API，把更新后的数据发送给后端，由后端写入JSON文件
        const targetItem = pcosItems.find(item => item.id === itemId);
        console.log("待提交的条目数据：", targetItem);
    };

    const handleInputChange = (itemId, field, value) => {
        setPcosItems(prevItems => 
            prevItems.map(item => 
                item.id === itemId ? {...item, [field]: value} : item
            )
        );
    };

    return (
        <div>
            <h1>hello world</h1>
            {pcosItems.map((item) => (
                <form onSubmit={(e) => handleSubmit(e, item.id)} key={item.id} method="post">
                    <input 
                        type="text" 
                        name="title" 
                        value={item.title} 
                        onChange={(e) => handleInputChange(item.id, "title", e.target.value)}
                    />
                    <input 
                        type="text" 
                        name="time" 
                        value={item.time} 
                        onChange={(e) => handleInputChange(item.id, "time", e.target.value)}
                    />
                    <input type="submit" value="提交"/>
                </form>
            ))}
        </div>
    )
}

关键补充说明 #

• 必须通过后端接口完成JSON文件的写入操作，前端仅负责数据收集和传递。
• 确保 PcosData["pcos-first"] 是结构正确的数组，每个元素包含 id、title、time 字段，否则 .map() 会抛出错误。

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