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

Posted 2023-03-16

【中文标题】如何从 React 中的子组件更新父组件（功能）

【英文标题】：How to update Parent component from Child component in React (Functional)

【发布时间】：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() 的代码。你的意思是你需要更多关于周围代码的信息吗？

【参考方案1】：

父组件

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

子组件

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