需要使用 useState
和 useEffect
钩子函数处理子组件变化后更新父组件的 state 状态,从而更新数据。以下提供一个示例代码:
import { useState, useEffect } from 'react';
import { Tabs, Select, Table } from 'antd';
const { TabPane } = Tabs;
const ParentComponent = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [selectedValue, setSelectedValue] = useState('');
const fetchData = async (value) => {
// 根据传入的 value 请求数据
setLoading(true);
const response = await fetch(`https://example.com/api/${value}`);
const result = await response.json();
setData(result);
setLoading(false);
};
useEffect(() => {
// 初始化数据,相当于 componentDidMount()
fetchData(selectedValue);
}, [selectedValue]);
const handleSelectChange = (value) => {
// 更新子组件状态
setSelectedValue(value);
};
return (
);
};
在代码中,我们使用 useState
和 useEffect
钩子函数分别处理了子组件选中的值和组件渲染完成后请求数据的操作。在 handleSelectChange
方法中,我们通过 setSelectedValue
方法更新选中的值。在 useEffect
中,我们监听 selectedValue
的变化,在渲染完成后执行 fetchData
方法请求数据,并将数据更新到 data
状态中。这样做后,只要选中的值变化,父组件就能响应并更新数据。