如何从 React 中的子组件更新父组件（功能）答案

【问题标题】：How to update Parent component from Child component in React (Functional)如何从 React 中的子组件更新父组件（功能）
【发布时间】：2022-01-07 15:26:34
【问题描述】：

我有以下称为 RoomManagement 的功能组件。在第一次渲染时，会调用 fetchRooms，然后依次使用数据库中的数据初始设置状态变量。

我有一个名为 RoomManagementModal 的子组件，我在其中传递了我的 setLoading 和 fetchRooms 函数。

我无法重新渲染父组件。我单击子组件中的一个按钮（这会向数据库添加一些内容）。因此，我试图通过再次调用props.fetch() 来获取新数据，但这次来自子节点，我认为这会触发父节点的状态更改，但似乎并非如此。

如果可能的话，我似乎无法找到一种强制父组件再次渲染的方法

function RoomManagement() {

    const [rooms, setRooms] = useState([]);
    const [unavailableRooms, setUnavailableRooms] = useState();
    const [loading, setLoading] = useState(true);

    const fetchRooms = async () => {
        await getAllRooms().then((res) => {
            res.json().then(data => setRooms(data))
        });
        await getAllRoomsUnavailable().then((res) => {
            res.json().then(data => setUnavailableRooms(data[0]))
        })
        setLoading(false)
    }
    
    useEffect(() => {
        fetchRooms();
    }, []);
    
    return (.....
   <RoomManagementModal setLoading={setLoading} fetch={fetchRooms}/>
)

}
export default RoomManagement;

<Button
          onClick={() => {
            if (form.room_id && form.start && form.end) {
              createRoomUnavailable(form).then((res) => {
                if (res.status != 200 && res.status != 201) {
                  res.text().then((e) => setError(e));
                } else {
                  props.fetch()
                }
              });
            } else {
              setError("Missing required Room Id or date time.");
            }
          }}
        >
          Submit
        </Button>

【问题讨论】：

将函数向下传递给更新父状态的子。
@evolutionxbox 这不是他们试图做的吗？ fetchRooms 是一个更新父状态的函数，它们将其传递给子状态。
@NicholasTower OP 没有显示它是如何在子组件中使用的。
@evolutionxbox 我不知道你为什么会这么说。他们确实显示了孩子调用props.fetch() 的代码。你的意思是你需要更多关于周围代码的信息吗？

标签： javascript reactjs react-functional-component

【解决方案1】：

父组件

1.为标题或slug声明一个状态和一个setter 2.定义一个函数来更新状态 3.将该功能作为道具传递给子组件

子组件

1.定义一个函数来处理和调用作为props传递的函数 2.来自父组件

【讨论】：