为什么我的变量在第一次点击 Apollo Client React 时为空？

Question

我试图在单击模态框上的 "Save" 按钮时调用 useMutation。但是，我第一次单击它时，发送的变量是空的（我可以在网络调用选项卡中看到变量，并且所有变量都是未定义的），即使当我执行 console.log 时我可以看到数据。

即

let globalState = {};

const SessionAdd = () => {
    console.log(globalState);   // This always displays the correct data when I click on the "Save" button. 
    const [AddsessionInput, {error} ] = useMutation(addSession,{
        variables: { 
            title:String(globalState.title),
            description:String(globalState.description)
        }
    });
  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 /> </Modal.Body>

                <Button variant="primary" onClick={AddsessionInput}>
                    Save
                </Button>
            </Modal.Footer>
        </Modal>
    </div>
  );
}

const AddSessionForm = () =>{

     const [sessionDetails, setSessionDetails] = useState({
        title:""
    });

    const handleSessionDetails = (evt) => {
        sessionDetails[evt.target.name] = evt.target.value;
        setSessionDetails(sessionDetails);
        globalState = sessionDetails;  
    };

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

这是处理父组件时处理状态的正确方法吗（即从父状态处理子组件中的对象）？

谢谢

Answer 1

我可能会稍微重构它：

const [AddSessionInput, {error}] = useMutation(QUERY_STRING);

const runAddSessionInput = async () => {
  await AddSessionInput({ variables });
};

在您的 onClick 中：

return (
  <Button variant="primary" onClick={runAddSessionInput} />
);

为什么我的变量在第一次点击 Apollo Client React 时为空？

Why are my variables empty on first click Apollo Client React?

reactjs

react-apollo

apollo-client