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

Question

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

每当我显示编辑表单，其中的字段填充了所选记录的值时，我需要编辑每个字段以便将其保存回数据库。如果我不更改任何字段值（包括记录的 ID）或仅更改一个值，我会收到错误消息： [GraphQL error]: Message: could not convert string to float: , Location: undefined, Path: undefined。我知道我可以在 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>
        )
    }
}

显示 Component 后，如何将所选记录的初始值分配给 this.state.id、this.state.name 等？我知道如何手动在 constructor 中向 this.state 输入一些值，但我想将表单字段中显示的值传递给 this.state。

Answer 1

您可能知道使用 setState 会强制在 <Query/> 组件中重新渲染和重新获取。表单组件（具有状态和事件处理）应放在 <Query/> 内以避免这种影响 - getDerivedStateFromProps() 用于初始状态。

在这种情况下，无需重构就足以有条件地 setState in render，例如：

            <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 (

GraphQL 错误 可能引用了一个 price 字段，在 variables 中转换类型（在 this.props.editOne 调用中）。

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

How do I assign values to states once I open my edit form?

reactjs

graphql

react-bootstrap

react-apollo