reactjs - 使用 ref 从父函数组件传递时 useState 不更新数据

Question

我正在尝试将数据发送到我将表单字段与该数据绑定的子函数组件。它在第一次调用时工作正常，但是当我第二次调用时，数据永远不会更新状态，它总是显示第一个。

这是使用子组件 ref 的父组件

export default function Form1() {
    const [count, setCount] = useState(0);
    const [counter, setCounter] = useState(10);

    const AddNewRef = useRef();

    const clickMe=() => {

        setCount(count+1);
        setCounter(counter*2);

        AddNewRef.current.showDrawer(counter*2);

    }


    return (
        <div>
            <p>You clicked count: {count} & counter: {counter} times</p>
            {
                count > 10 ?
                (
                        <p className='red'>your count is greater then 10</p>
                ) :
                (
                    <p className='green'>your count is less then 10</p>
                )
            }
            <button onClick={() => clickMe()}>
                Click me
            </button>

           
            <AddNew ref={AddNewRef} Count={count} Counter={counter}  />

        </div>
    )
}
 

这是子组件

const AddNew=forwardRef((props, ref) => {
    const[objCounter, setobjCounter] = useState(null);

    useImperativeHandle(
        ref,
        () => ({
            showDrawer(count) {


              setobjCounter(count);
              //only shows at first click at parent, Not updating on 2nd, 3rd click from parent and so on....


          }
        }),
    )

return (
    <>
      <Drawer
        title={<span> <i className='fa-solid fa-kaaba' /> Haj Setup Form</span>}
        width={window.innerWidth > 900 ? 800 : window.innerWidth - 50}
        onClose={onClose}
        visible={visible}
        bodyStyle={{ paddingBottom: 80 }}
        extra={
          <Space>
            <Button onClick={onClose}>Cancel</Button>
            <Button onClick={onClose} type="primary">
              Submit
            </Button>
          </Space>
        }
      >
        <Form 
      style={{display: formVisible ? 'block' : 'none'}}
          form={form}
          layout="vertical" 
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                          
          hideRequiredMark>
            

            <Row gutter={16}>
              <Col xs={24} sm={24} md={24} lg={24}>

                <Form.Item
                  name="packageName"
                  label="Package Name"
                  rules={[{ required: true, message: 'Please enter package name' }]}
                  initialValue={objCounter}
                  
                  >
                  <Input style={{width: '100%'}}
                         maxLength={100}  /> 
                </Form.Item>
              </Col>
            </Row>
        </Form>
      </Drawer>
    </>
  )
});


export default AddNew

Answer 1

由于状态更新正在工作并且您只是想更新表单字段，因此您可以使用从挂钩返回的form引用来更新表单状态。useForm在这种情况下，请更新该packageName字段。

const AddNew = forwardRef((props, ref) => {
  const [objCounter, setobjCounter] = useState(13);
  const [visible, setVisible] = useState(false);
  const [formVisible, setformVisible] = useState(true);
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
    showDrawer(count) {
      setobjCounter(count);
      setVisible(true);

      form.setFieldsValue({
        packageName: count // <-- update the specific field
      });
    }
  }));

  const onClose = () => {
    setVisible(false);
  };

  return (
    ...
  );
});