Reactjs 打开编辑表单后，如何为状态赋值？

我正在尝试在React中创建我的第一个简单CRUD前端应用程序。我对编辑表单有一些问题

每当我显示编辑表单，其中的字段填充了所选记录的值时，我都需要编辑每个字段，以便将其保存回数据库。如果我不更改任何字段值（包括记录的id），或者只更改一个值，则会出现错误：

[GraphQL error]：消息：无法将字符串转换为float:，位置：未定义，路径：未定义

。 我知道，我可以在

Query

中添加

Mutation

，但在父组件中重新读取更新的记录列表时遇到问题，仍然会收到上面提到的错误消息

export class EditForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: '',
            name: '',
            price: '',
            category: ''
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    };

    updateSome = async () => {
      const {id, name, price, category} = this.state;
      await this.props.editOne({
          variables: {
              id,
              name,
              price,
              category
          },
          refetchQueries: [{ query: ones }]
      })
    };

    render() {
        return (
            <div>
                <Query query={GET_ONE} variables={{one: Number(this.props.id)}}>
        {({ loading, error, data, networkStatus }) => {
            if (loading) return "Loading...";
            if (error) return `Error! ${error.message}`;
            if (networkStatus === 4) return "Refetching!";
            return (
                <div>
                     {data.ones.map(one => (
                       <Form key={one.id}>
                    <Row>
                        <Col>
                        <Form.Group>
                        <Form.Label>ID</Form.Label>
                            <Form.Control
                                name='id'
                                defaultValue={one.id}
                                onChange={this.handleInputChange}
                                type="text"
                                placeholder="id"
                            />
                        </Form.Group>
                        </Col>
                        <Col>
                        <Form.Group>
                        <Form.Label>Name</Form.Label>
                            <Form.Control
                                name='name'
                                defaultValue={one.name}
                                onChange={this.handleInputChange}
                                type="text"
                                placeholder="name"
                            />
                        </Form.Group>
                        </Col>
                        <Col>
                        <Form.Group>
                            <Form.Label>Price</Form.Label>
                            <Form.Control
                                name='price'
                                defaultValue={one.price}
                                onChange={this.handleInputChange}
                                type="number"
                                step={0.01}
                                placeholder="price"
                            />
                        </Form.Group>
                        </Col>
                        <Col>
                        <Form.Group>
                            <Form.Label>Category</Form.Label>
                            <Query query={twos}>
                                {({loading, error, data}) => {
                                    if (loading) return <Spinner animation="border" role="status">
                                                <span className="sr-only">Loading...</span>
                                            </Spinner>;
                                    if (error) return `Error! ${error.message}`;
                                    return (
                                        <Form.Control name='category'
                                                      defaultValue={one.category.id}
                                                      onChange={this.handleInputChange}
                                                      as="select"
                                                      placeholder="category"
                                        >
                                            {data.twos.map(two => (
                                        <option key={two.id} value={two.id}>{two.category}</option>
                                                ))}
                                    </Form.Control>
                                    );
                                }}
                            </Query>
                        </Form.Group>
                        </Col>
                    </Row>
                    <ButtonToolbar>
                            <Button
                                variant="primary"
                                onClick={() => this.updateSome()}
                            >Update</Button>
                        </ButtonToolbar>
                </Form>
                    ))}
                </div>
            );
        }}
    </Query>
            </div>
        )
    }
}

导出类EditForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
id:“”，
名称：“”，
价格：''，
类别：“”
};
this.handleInputChange=this.handleInputChange.bind（this）；
}
handleInputChange=（事件）=>{
const target=event.target；
常量值=target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
};
updateSome=async（）=>{
const{id，name，price，category}=this.state；
等待这个，道具，伊迪通({
变量：{
身份证件
名称
价格
类别
},
refetchQueries:[{query:ones}]
})
};
render（）{
返回(
{（{加载、错误、数据、网络状态}）=>{
如果（加载）返回“加载…”；
if（error）返回`error！${error.message}`；
如果（网络状态===4）返回“重新蚀刻！”；
返回(
{data.one.map（one=>(
身份证件
名称
价格
类别
{（{加载，错误，数据}）=>{
如果（正在加载）返回
加载。。。
;
if（error）返回`error！${error.message}`；
返回(
{data.twos.map（two=>(
{2.类别}
))}
);
}}
this.updateSome（）}
>更新
))}
);
}}
)
}
}

---

显示

组件后，如何将所选记录的初始值分配给
this.state.id
、
this.state.name
等？我知道如何手动在
构造函数中为此.state输入一些值，但我想将表单字段中显示的值传递给
此.state
您可能知道，使用
设置state
会强制在
组件中重新渲染和重新蚀刻。表单组件（带有状态和事件处理）应该放在
中以避免这种影响-
getDerivedStateFromProps（）
用于初始状态

在这种情况下，即使不进行重构，也可以在
渲染
中有条件地设置状态
，例如：

            <Query query={GET_ONE} variables={{one: Number(this.props.id)}}>
    {({ loading, error, data, networkStatus }) => {
        if (loading) return "Loading...";
        if (error) return `Error! ${error.message}`;
        if (networkStatus === 4) return "Refetching!";

        // one-time flag, it can be undefined/uninitialized
        if (!this.state.initialized) {
          this.setState( {
            initialized: true, // block this block
            id: data.someField,
            name: data.someField,
            price: data.someField,
            category: data.someField
          })
        }

        return (


{（{加载、错误、数据、网络状态}）=>{
如果（加载）返回“加载…”；
if（error）返回`error！${error.message}`；
如果（网络状态===4）返回“重新蚀刻！”；
//一次性标志，可以是未定义/未初始化
如果（！this.state.initialized）{
此.setState（{
已初始化：true，//阻止此块
id:data.someField，
名称：data.someField，
价格：data.someField，
类别：data.someField
})
}
返回(

GraphQL错误可能是指一个
价格
字段，在
变量中转换类型
（在
这个.props.editOne调用中）.
我完全明白你的意思，但我不确定如何到达我表单中的字段。React不接受简单的ref，因此它一定是其他内容。我试图从查询中访问数据，但类似data.ones.indexOf（0）.id没有给我记录的id。
data.ones[0].id
？
console.log（data）
？当然，您知道您正在为许多记录使用（保存在状态中）一组变量…相互覆盖？您可能需要在状态中使用一个数组来保存所有记录的值。