Apollo Client React首次点击变量为空问题及状态处理咨询

问题分析与结论 #

首先明确：你当前通过全局变量处理父子组件状态的方式完全不正确，这也是导致点击Save按钮时useMutation首次发送空变量的根本原因。

为什么全局变量会引发这个问题？

React组件的渲染逻辑依赖自身的state或props变化——只有当这两者更新时，组件才会重新执行（重渲染），同步更新相关逻辑（比如你的useMutation配置）。但全局变量的变化不会触发React组件的重渲染：

• SessionAdd组件首次渲染时，就已经确定了useMutation的variables参数（此时globalState是空对象，所以所有变量都是undefined）。
• 当你在子组件里修改globalState后，SessionAdd组件并没有重新渲染，所以useMutation的variables始终保持初始的空值。
• 而点击Save时console.log(globalState)能看到正确数据，只是因为此时全局变量已经被修改，但组件的逻辑（包括useMutation的配置）并没有重新计算。

另外，你的子组件AddSessionForm里的状态更新方式也有问题：直接修改sessionDetails这个state对象的属性，再把同一个对象传给setSessionDetails。React依赖不可变更新来检测状态变化——直接修改原对象的话，React会认为状态没有变化，不会触发子组件的重渲染，这也会加剧状态不同步的问题。

正确的父子组件状态处理方式

React中父子组件共享状态的标准做法是状态提升：把需要共享的状态放在父组件中，然后通过props把状态和更新状态的回调函数传递给子组件。这样状态变化会触发父组件重渲染，进而同步更新useMutation的配置。

修改后的代码示例：

const SessionAdd = () => {
  // 父组件维护共享状态
  const [sessionDetails, setSessionDetails] = useState({ title: "", description: "" });
  const [show, setShow] = useState(false);
  
  // 定义回调函数，子组件调用它来更新状态
  const handleSessionChange = (updatedDetails) => {
    setSessionDetails(updatedDetails);
  };

  // 直接使用父组件的state作为variables，状态变化时会自动更新
  const [AddsessionInput, { error }] = useMutation(addSession, {
    variables: {
      title: String(sessionDetails.title),
      description: String(sessionDetails.description)
    }
  });

  const handleShow = () => setShow(true);
  const handleClose = () => setShow(false);

  return (
    <div className="AddSession">
      <Button variant="primary" onClick={handleShow}>
        <i className='fas fa-plus' /> Create a new Session
      </Button>
      <Modal show={show} onHide={handleClose} size="md">
        <Modal.Header closeButton>
          <Modal.Title><i className='fas fa-camera' /> Create details</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {/* 把状态和回调传给子组件 */}
          <AddSessionForm 
            sessionDetails={sessionDetails} 
            handleSessionChange={handleSessionChange} 
          />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="primary" onClick={AddsessionInput}> Save </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

const AddSessionForm = ({ sessionDetails, handleSessionChange }) => {
  const handleSessionDetails = (evt) => {
    // 不可变更新：创建新对象，而不是修改原对象
    const updatedDetails = {
      ...sessionDetails,
      [evt.target.name]: evt.target.value
    };
    // 调用父组件的回调更新状态
    handleSessionChange(updatedDetails);
  };

  return(
    <div>
      <p><strong>Add title</strong></p>
      <FormControl 
        name="title" 
        value={sessionDetails.title}
        onChange={handleSessionDetails}
      />
      <br/>
      <p><strong>Add description</strong></p>
      <FormControl 
        name="description" 
        value={sessionDetails.description}
        onChange={handleSessionDetails}
      />
    </div>
  );
}

关键改进点说明

• 状态提升到父组件：sessionDetails由父组件SessionAdd维护，保证状态的单一数据源。
• 不可变状态更新：子组件中通过扩展运算符...创建新的状态对象，确保React能检测到状态变化。
• 回调函数传递：子组件通过props接收的handleSessionChange更新父组件状态，触发父组件重渲染，进而更新useMutation的variables参数。
• 受控组件：子组件的输入框绑定了value属性，确保输入框的值始终和父组件的状态同步，这是React表单的标准做法。

这样修改后，当你在输入框中输入内容时，父组件的状态会实时更新，点击Save按钮时，useMutation会使用最新的状态值作为变量，不会再出现空值的问题。

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