reactjs - React 最佳实践 CRUD

Question

我需要建议。我有父组件：有数据的页面和有输入的子组件模态我应该有机会更改数据表的项目我想知道最佳实践是什么，如何做到这一点，我应该在页面中设置本地状态（父) 并将其从 Modal(Child) 更改。我应该在页面（父组件）还是子（组件）中调度（编辑）数据

export default function PostPage() {
  const dispatch = useDispatch();
  const selector = useSelector((state) => state.posts);
  const [editDialogVisible, setEditDialogVisible] = useState(false);
  const [postGuid, setPostGuid] = useState('');

  useEffect(() => {
    dispatch(getPosts());
  }, []);

  function saveObj(obj) {
    dispatch({ type: 'SET_POSTS', payload: [obj] });
  }

  /** Обработчики событий */
  function onEditDoctor(rowData) {
    setPostGuid(rowData.Guid);
    setEditDialogVisible(true);
  }



  /** Кнопки действия для row докторов */
  function actions(rowData) {
    return (
      <>
        <Button icon="pi pi-pencil" className="p-button-rounded p-button-success p-mr-2" onClick={() => onEditPost(rowData)} />
        <Button icon="pi pi-trash" className="p-button-rounded p-button-warning" onClick={() => {}} />
      </>
    );
  }

  const post = selector.posts.find((item) => item.Guid === postGuid);
  return (
    <div>
      <Card>
        <DataTable value={selector.doctors}>
          <Column some columns... />
          <Column body={actions} />
        </DataTable>
        <DialogPost
          post={post}
          visible={editDialogVisible}
          setVisible={setEditDialogVisible}
          save={saveObj}
        />
      </Card>
    </div>
  );
}

我有上面的代码，我想知道我应该在哪里放置编辑逻辑的最佳实践。在页面组件或对话框组件中。

对话代码：

import React, { useEffect, useState } from 'react';
import { Dialog } from 'primereact/dialog';
import { useDispatch, useSelector } from 'react-redux';

export default function DialogDoctor({
  visible, setVisible, doctor, save,
}) {
  const [postObj, setPostObj] = useState({});
  console.log('postObject', doctor);

  useEffect(() => {
    setPostObj(doctor);
  }, [doctor]);

  function handlerSaveButton() {
    save(postObj);
    setVisible(false);
  }

  const footer = (
    <div>
      <Button onClick={handlerSaveButton} label="Сохранить" icon="pi pi-check" className="p-button-success" />
      <Button onClick={() => setVisible(false)} label="Закрыть" />
    </div>
  );

  return (
    <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)} footer={footer}>
      <div className="p-fluid">
        <div className="p-field">
          ФИО
          <InputText
            value={postObjj?.Name}
            onChange={
            (e) => setPostObj({ ...postObj, Name: e.target.value })
            }
          />
        </div>
      </div>
    </Dialog>
  );
}

我写了这个解决方案，想知道它是否是最佳实践。

我在哪里可以看到最佳实践的例子。

标签： reactjsredux