ReactJS表单输入无法修改求助：Apollo Client获取用户后无法编辑

问题根源 #

你的表单输入框当前直接绑定了GraphQL查询返回的dataUser原始数据，而非组件内部的value状态。尽管配置了onChange更新value，但输入框的显示值始终读取dataUser的固定值，导致无法编辑。

修复步骤 #

1. 同步查询数据到组件状态
   添加useEffect监听dataUser的变化，当查询到用户数据后，将其同步到value状态中，确保输入框的数据源是可修改的组件状态。

2. 修正输入框的value绑定
   将所有输入框的value属性从dataUser.xxx替换为value.xxx，让输入框与组件状态双向绑定。

3. 修复开关组件的状态逻辑
   根据dataUser.status初始化isChecked状态，避免固定值导致的显示错误。

修改后的完整代码 #

import React, { useEffect, useState } from "react";
import { useMutation, useQuery } from "@apollo/client";
import { Button, Modal, Form } from "react-bootstrap";

import { GET_USER_BY_ID } from "../../../gql/query";

const ModalEdit = (props) => {
    // state for check input component
    const [isChecked, setIsChecked] = useState(false);
    const [value, setValue] = useState({
      full_name: "",
      email: "",
      phone: "",
      address: "",
      password: "",
      group_id: "",
    });

    useEffect(() => {
        if (props.show) {
            document.body.classList.add("modal-open");
        }

        return () => {
            if (document.body.classList.contains("modal-open")) {
                document.body.classList.remove("modal-open");
            }
        };
    }, [props.show]);

    const { data, loading, error } = useQuery(GET_USER_BY_ID, {
        variables: { username: props.username },
    });

    const dataUser = data?.getUserByID;

    // 同步查询数据到组件状态
    useEffect(() => {
        if (dataUser) {
            setValue({
                full_name: dataUser.full_name,
                email: dataUser.email,
                phone: dataUser.phone,
                address: dataUser.address,
                password: dataUser.password,
                group_id: dataUser.group_id,
            });
            // 根据用户状态初始化开关
            setIsChecked(dataUser.status === 'ACTIVE');
        }
    }, [dataUser]);

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error!</p>;

    const onChange = (event) => {
        setValue({
            ...value,
            [event.target.name]: event.target.value
        });
    };

    // 开关状态更新处理
    const handleSwitchChange = (event) => {
        setIsChecked(event.target.checked);
        // 可选：同步到value状态，方便后续提交
        setValue(prev => ({...prev, status: event.target.checked ? 'ACTIVE' : 'INACTIVE'}));
    };

    return (
        <Modal show={props.show}>
            <Modal.Header>
                <Modal.Title> <span>FORMULIR AKUN PENGGUNA</span> </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Form>
                    <Form.Group className="mb-3">
                        <Form.Label>Role Akun</Form.Label>
                        <Form.Select 
                            aria-label="pilih user role"
                            name="group_id"
                            value={value.group_id}
                            onChange={onChange}
                        >
                            <option value={dataUser.group_id}>{dataUser.group_id}</option>
                            <option value="Admin RJ">Admin RJ</option>
                        </Form.Select>
                    </Form.Group>
                    <Form.Group className="mb-3">
                        <Form.Label>Nama Lengkap</Form.Label>
                        <Form.Control name="full_name" value={value.full_name} onChange={onChange} />
                    </Form.Group>
                    <Form.Group className="mb-3">
                        <Form.Label>Email</Form.Label>
                        <Form.Control type="email" name="email" value={value.email} onChange={onChange}/>
                    </Form.Group>
                    <Form.Group className="mb-3">
                        <Form.Label>Phone</Form.Label>
                        <Form.Control type="text" name="phone" value={value.phone} onChange={onChange} />
                    </Form.Group>
                    <Form.Group className="mb-3">
                        <Form.Label>Address</Form.Label>
                        <Form.Control type="text" name="address" value={value.address} onChange={onChange} />
                    </Form.Group>
                    <Form.Group className="mb-3">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password" name="password" value={value.password} onChange={onChange} />
                    </Form.Group>
                    <Form.Label>Aktifkan Akun</Form.Label>
                    <Form.Check 
                        type="switch"
                        checked={isChecked}
                        onChange={handleSwitchChange}
                        id="custom-switch"
                        label="Aktifkan Akun"
                    />      
                </Form>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="primary" type="submit" >Submit</Button>
                <Button variant="secondary" onClick={props.onClose}>
                    Close
                </Button>
            </Modal.Footer>
        </Modal>
    );
};

export default ModalEdit;

关键修改说明 #

• 新增useEffect监听dataUser，将查询数据同步到value状态，同时初始化开关状态。
• 所有输入框的value改为绑定value状态的对应字段。
• 下拉选择框添加了name属性和onChange绑定，确保选中值能同步到状态。
• 重构开关组件的逻辑，合并重复代码，并添加状态同步到value的可选逻辑（方便提交时获取状态）。

内容的提问来源于stack exchange，提问作者github.arief