根据另一个反应组件的动作重新渲染另一个反应组件

Question

目前，我有一个名为 Interest Category 的反应组件，它显示了一组初始兴趣类别。我有另一个名为 CreateInterestCategoryDialog 的反应组件（它是一个模态），在输入一些数据后向服务器发送一个请求并创建一个实体 Interest Category 然后关闭模态。但是，我想重新渲染我的 Interest Category 组件并使用新数据更新组件而不刷新页面。我将如何做出反应？

创建InterestCategoryDialog 组件*

const CreateInterestCategoryDialog = () => {
  const [open, setOpen] = useState(false);
  const [processingRequest, setProcessingRequest] = useState(false);
  const [formSuccess, setFormSuccess] = useState('');
  const [formError, setFormError] = useState('');

  const formSchema = Yup.object().shape({
    name: Yup.string().required(
      'Name is required'
    ),
  });

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const submitFormData = async (formData) => {
    try {
      setProcessingRequest(true);
      console.log('form data to submit in request to server:', formData);
      const { data } = await devAPI.post('/v1/interest_categories', formData);

      if ( data ) {
        const successMessage = data.message;
        const responseData = data.data;
        console.log('response data from server', responseData);

        setFormSuccess(successMessage);
        setFormError('');

        handleClose();
      }
  
    } catch (error) {
      console.log(`error: ${error.message}`);
      setFormError(error.message);
      setFormSuccess('');
    }
  };
  
  return (
    <div>
      <Button variant="outlined" onClick={handleClickOpen}>
        <AddIcon fontSize="small" /> Create Interest Category
      </Button>
      
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Create Interest Category</DialogTitle>
        <DialogContent>
          <Formik
            initialValues={formInitialValues(['name'])}
            onSubmit={submitFormData}
            validationSchema={formSchema}
          >
            {({ dirty, isValid, ...props }) => {

              console.log('form props', props);
              console.log('form is dirty', dirty);
              console.log('form is vaild', isValid);
              return (
                <Form>
                  <div className="mt-3 mb-3">
                    {formSuccess && (
                      <div>{formSuccess}</div>
                    )}
                    {formError && (
                      <div>{formError}</div>
                    )}
                  </div>
                  <TextField
                    autoFocus
                    onChange={props.handleChange}
                    margin="dense"
                    id="name"
                    label="Name"
                    type="input"
                    fullWidth
                    variant="standard"
                    name="name"
                  />
                  <DialogActions>
                    <Button
                      disabled={!dirty || !isValid}
                      type="submit"
                    >
                      {processingRequest ? (
                        <span>
                          <span>Loading...</span>
                        </span>
                      ) : (
                        <span>Create</span>
                      )}
                    </Button>
                    <Button onClick={handleClose}>Cancel</Button>
                  </DialogActions>
                </Form>
              )
            }}
          </Formik>
        </DialogContent>
      </Dialog>
    </div>
  );
};

兴趣类别组件

const InterestCatgeory = () => {
  const [interestCategories, setInterestCategories] = useState([]);

  const { bufferedResponseData, loading, error } = useFetchResource('/v1/interest_categories');

  useEffect(() => {
    setData(bufferedResponseData);
  }, [bufferedResponseData.length]);

  console.log('interest categories', data);

  return (
    <>
      <CreateInterestCategoryDialog />
      <LoadFetchedData loaded={loading} error={error}>
      { interestCategories.length ? ( 
          <div className="row mt-5">
            {
              React.Children.toArray(interestCategories.map(( data ) => {
                return (<div className="col-sm">
                  <div className="card">
                      <div className="card-body">
                        <h5 className="card-title">{data.category.name}</h5>
                      </div>
                    </div>
                </div>);
              }))
            }
          </div>
        ) : (<div className="row mt-5"><p> No interest categories created.</p></div>)
      }
      </LoadFetchedData>
    </>
  )
};

Answer 1

看来我明白了！

在我的Interest Category 组件中，我需要使用useState 挂钩并将这些变量interestCategories 和setInterestCategories 作为道具传递给我的CreateInterestCategoryDialog 组件。

兴趣类别组件

const { bufferedResponseData, loading, error } = useFetchResource('/v1/interest_categories');

const [interestCategories, setInterestCategories] = useState([]);

  useEffect(() => {
    setInterestCategories(bufferedResponseData);
  }, [bufferedResponseData.length]);

<CreateInterestCategoryDialog interestCategories={interestCategories} setInterestCategories={setInterestCategories} />

然后我需要更新我的CreateInterestCategoryDialog 组件中的状态。在submitFormData 函数中执行任何副作用。

const submitFormData = async (formData, { resetForm }) => {
    try {
      const { data } = await devAPI.post('/v1/interest_categories', formData);

      if ( data ) {
        const successMessage = data.message;
        const responseData = data.data;

        // updating the state with the new response data.
        const updateState = [...interestCategories, responseData];

        setInterestCategories(updateState);
      }
  
    } catch (error) {
      console.log(`error: ${error.message}`);
      setFormError(error.message);
      setFormSuccess('');
    }