Javascript 您好，在更新状态时，我有点困在react表单中 从“React”导入React； 导入“/styles.css”； 类应用程序扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ 用户：{ id:[1,2,3,4]， 姓名：[“约翰”、“威克”、“詹姆斯”，空]， 城市：[“巴黎”、“柏林”、“纽约”、“悉尼”]， }, 更新值：{ id:null， 名称：空， 城市：空， }, }; this.updateToApi=this.updateToApi.bind（this）； this.updateState=this.updateState.bind（this）； } handleSubmit=（e）=>{ e、 预防默认值（）； }; handleUserChange=（e）=>{ 常量数据={…this.state.updatedValues}； 数据[e.currentTarget.name]=e.currentTarget.value； 这是我的国家({ 数据， }); }; updateToApi（）{ //使用this.state.updatedValues将值更新到api } updateState=（）=>{ 这是我的国家({ 更新值：{ id:this.state.user.id， 名称：this.state.user.name， 城市：this.state.user.city， }, }); }; render（）{ console.log（this.state）； 返回( {this.state.user.id.map（（id，index）=>{ 返回( , , ); })} ); } }

这是我试图实现的示例，我希望表单中填充用户状态中的值，当我更改文本字段中的值时，它应该更新整个updatetoApi函数，以便db可以接收新值。我面临的问题是，当我只更改一个值时，它基本上会向api发送一个post请求，其中只包含相应字段的一个更新值，而所有其他值都将被null覆盖

我有一个我试过的样品

---

您需要在函数中进行一点空检查，调用API：

import React from "react";
import "./styles.css";

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            user: {
                id: [1, 2, 3, 4],
                name: ["john", "wick", "james", null],
                city: ["paris", "berlin", "new york", "sydney"],
            },
            updatedValues: {
                id: null,
                name: null,
                city: null,
            },
        };
        this.updateToApi = this.updateToApi.bind(this);
        this.updateState = this.updateState.bind(this);
    }
    handleSubmit = (e) => {
        e.preventDefault();
    };
    handleUserChange = (e) => {
        const data = { ...this.state.updatedValues };
        data[e.currentTarget.name] = e.currentTarget.value;
        this.setState({
            data,
        });
    };
    updateToApi() {
        //updating the values to api using the this.state.updatedValues
    }
    updateState = () => {
        this.setState({
            updatedValues: {
                id: this.state.user.id,
                name: this.state.user.name,
                city: this.state.user.city,
            },
        });
    };
    render() {
        console.log(this.state);
        return (
            <div className="App">
                {this.state.user.id.map((id, index) => {
                    return (
                        <form onSubmit={this.handleSubmit}>
                            <input
                                type="text"
                                name="id"
                                placeholder="id "
                                defaultValue={id}
                                onChange={this.handleUserChange}
                            />
                            ,
                            <input
                                type="text"
                                name="name"
                                placeholder="name"
                                defaultValue={
                                    this.state.user.name[index]
                                        ? this.state.user.name[index]
                                        : this.state.updatedValues
                                }
                                onChange={
                                    this.state.user.name[index] !== "undefined"
                                        ? this.updateState
                                        : this.handleUserChange
                                }
                            />
                            ,
                            <input
                                type="text"
                                name="city"
                                placeholder="city"
                                defaultValue={this.state.user.city[index]}
                                onChange={this.handleUserChange}
                            />
                        </form>
                    );
                })}
            </div>
        );
    }
}

updateToApi() {
  if(this.state.updatedValues.id && 
   this.state.updatedValues.name && 
   this.state.updatedValues.city){
     //updating the values to api using the this.state.updatedValues
  }
}