如何通过使用React中的道具动态地设置儿童组件中的数据？

Question

我已经在

现在，我正在向后端发送请求，以将新记录添加到DB，我想在添加新记录后立即更新表，从后端获取所有项目。

这是我的parent app.js类，其中2个组件为 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 中的表数据：

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>
  );
}

这里发生的是当我添加新记录时，表格数据不会动态变化，但是如果我添加了第二个数据，然后看到了先前的数据和更新表，但仍未显示最后添加的数据。如何刷新数据并将最新数据发送到 Mainpanel ？

export default MainPanel;

Answer 1

您的问题与本节有关：

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

看起来您正在调用refresh函数（ props.funcparam（）），然后 addcustomer 服务已被调用（因为这是一个 Promise ）。这会导致您的获取在更新现有数据之前开始获取现有数据。

您需要使函数异步，然后等待这样：

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

现在您的功能将等待 service.Addcustomer 才能完成执行，然后再执行刷新量。

Answer 2

假设 service.addcustomer（名称，姓氏）是一个异步调用，它将数据发布到服务器。然后，您需要将 addNewCustomer 方法放入异步，并等待此通话的响应，一旦您得到响应，您需要致电 props.funcparam（）才能获得服务器的最新数据。