如何在 React 中使用 props 动态设置 child 组件中的数据？

Question

我已经解决了

中的一个问题

现在我正在向后端发送向数据库添加新记录的请求，我想在添加新记录后立即通过从后端获取所有项目来更新 table。

这是我的 parent App.js class 有两个组件 MainPanel 和 TableFooterPanel :

function App() {

  const [customers, setCustomers] = useState([]);
  
  useEffect(() => {
    const fetchPostList = async () => {
      const response = await service.getCustomerList();
      setCustomers(response.data);
    };
    fetchPostList()
  }, []);

  const refreshTableData = () => {
    const fetchPostList = async () => {
      const response = await service.getCustomerList();
      setCustomers(response.data);
    };
    fetchPostList()
  }
  return (
    <div className="App">
      <h1>Customer List</h1>
      <MainPanel param={customers}/>
      <TableFooterPanel funcParam={refreshTableData}/>
    </div>
  );
}

export default App;

我正在将刷新功能传递给 TableFooterPanel，它有一个添加新记录的按钮，当添加新记录时会触发此功能。这是 TableFooterPanel

function TableFooterPanel(props) {

    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');

    const addNewCustomer = (name, surname) => {
        service.addCustomer(name, surname);
        props.funcParam();
    }

    return (

        <>
            <Card className='buttonFooter'>
                <Form className='buttonFooter'>
                    <input type="text" placeholder="First Name" defaultValue={firstName} onChange={e => setFirstName(e.target.value)}></input>
                    <input type="text" placeholder="Last Name" defaultValue={lastName} onChange={e => setLastName(e.target.value)}></input>
                    <Button onClick={() => addNewCustomer(firstName, lastName)}>Add</Button>
                </Form>
            </Card>

        </>

    );

}
export default TableFooterPanel;

我想刷新位于 MainPanel:

中的 table 数据

function MainPanel(props) {

  const [customers, setCustomers] = useState([]);
  
  const deleteCustomer = (id) => {
    service.deleteCustomerById(id);
  }

  return (
    <ReactBootStrap.Table striped bordered hover>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {props.param &&
            props.param.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.firstName}</td>
                <td>{item.lastName}</td>
                <td><Button onClick={() => deleteCustomer(item.id)} ><FontAwesomeIcon icon={faTrashRestore} /></Button></td>
              </tr>   
            ))}
        </tbody>
      </ReactBootStrap.Table>
  );
}

这里发生的是当我添加一条新记录时，table 数据没有动态变化，但是如果我添加第二个数据然后我看到以前的数据并更新 table 但仍然没有显示最后添加的数据。如何刷新数据并将最新数据发送到 MainPanel?

export default MainPanel;

Answer 1

您的问题出在这部分：

const addNewCustomer = (name, surname) => {
  service.addCustomer(name, surname);
  props.funcParam();
}

您似乎在 addCustomer 服务调用完成之前调用刷新函数 (props.funcParam())（因为这是一个 Promise）。这导致您的提取在更新之前开始提取现有数据。

您需要使函数异步，然后 await 像这样：

const addNewCustomer = async (name, surname) => {
  await service.addCustomer(name, surname);
  props.funcParam();
}

现在您的函数将等待 service.addCustomer 在执行刷新函数之前完成执行。

Answer 2

假设 service.addCustomer(name, surname) 是一个异步调用并将数据发布到服务器。然后你需要将 addNewCustomer 方法放入异步并等待此调用的响应，一旦你得到响应，你需要调用 props.funcParam( ) 从服务器获取最新数据。

如何在 React 中使用 props 动态设置 child 组件中的数据？

How to set data in child component dynamically by using props in React?

javascript

reactjs

typescript

react-hooks

react-component