React中如何将API获取的值传入handleSubmit并合并到inputs

核心思路 #

无需通过handleChange收集API获取的user.id，直接在提交阶段将其合并到inputs对象，或是在获取到用户数据后初始化到inputs状态中即可。

方案1：提交时合并数据（推荐） #

修改handleSubmit函数，把API返回的用户ID与现有inputs合并后再发起请求：

const handleSubmit = (event) => {       
    event.preventDefault();     
    // 合并用户ID到提交数据
    const submitData = {
        ...inputs,
        id: user.id // user为API获取的单个用户对象
    };
    axios.post(`https://xxxxxxxx/api_xxxxxxx/user/save`, submitData).then(function(response){
        console.log(response.data);
    });          
}

同时修正状态定义（API返回单个用户而非数组）：

// 将初始状态从数组改为对象
const [user, setUser] = useState({});

// 修改getUser函数，直接存储单个用户对象
function getUser() {
    axios.get(`https://xxxxxxx/api_xxxx/users/${id}`).then(function(response) {
        console.log(response.data);
        setUser(response.data);
    });
}

// 渲染部分无需map，直接使用user.id
return (
    <form onSubmit={handleSubmit}>
        <textarea type="text" name="comment" onChange={handleChange} />
        {/* 可选：显示用户ID用于确认 */}
        <div>当前用户ID：{user.id}</div>
        <button type="submit">Register</button>
    </form>
)

方案2：初始化时将ID存入inputs #

在获取用户数据成功后，直接把user.id写入inputs状态，提交时直接传inputs即可：

function getUser() {
    axios.get(`https://xxxxxxx/api_xxxx/users/${id}`).then(function(response) {
        console.log(response.data);
        setUser(response.data);
        // 将用户ID初始化到inputs中
        setInputs(prev => ({...prev, id: response.data.id}));
    });
}

// 提交函数无需修改，直接使用inputs
const handleSubmit = (event) => {       
    event.preventDefault();     
    axios.post(`https://xxxxxxxx/api_xxxxxxx/user/save`, inputs).then(function(response){
        console.log(response.data);
    });          
}

你之前尝试无效的原因 #

• onSubmit是<form>标签的专属事件，<input>标签不会触发该事件，因此你的handleChange不会被调用
• 即便给隐藏输入框添加onChange，由于其值是固定的，不会触发变化事件，也无法被handleChange收集

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