React中如何在useEffect内从Lobbies组件向App.js回传prop

1. 修正Lobby组件的props接收逻辑 #

你当前的Lobby组件没有声明接收父组件App传入的inGame回调属性，直接调用props.inGame会报错，有两种常用写法可选：

写法1：保留解构赋值写法（推荐） #

直接在组件入参的解构列表中加入你需要用到的父组件传入属性即可：

import React, { useState, useEffect } from 'react';
import firebase from 'firebase';

// 把inGame、setLobby等父组件传的属性加入解构列表
const Lobby = ({userKey, userName, inGame, setLobby}) => {

    useEffect(() => {
        if (lobbyCreated){
            const db = firebase.database().ref(`Lobby/${lobbyKey}/players`);

            const listener = db.on('value', snapshot => {
                var fetchedTasks = [];

                fetchedTasks = snapshot.val();

                console.log(fetchedTasks[0]['game']);

                if (fetchedTasks[0]['game']) {
                    // 直接调用解构出来的回调方法即可回传参数
                    inGame(true, lobbyKey);
                }else{
                    if (fetchedTasks.length != players.length)  setPlayers(fetchedTasks);
                }
            });

            return () => db.off('value', listener);
        }
    // 补充useEffect依赖项，避免无意义的重复执行
    }, [lobbyCreated, lobbyKey, players.length, inGame]);
};

写法2：不解构props，直接接收整体props对象 #

如果你不想用解构写法，直接把组件入参改为props即可：

import React, { useState, useEffect } from 'react';
import firebase from 'firebase';

// 不解构，直接接收props对象
const Lobby = (props) => {
    // 内部使用其他属性时要加props.前缀，比如props.userKey、props.userName
    useEffect(() => {
        if (lobbyCreated){
            const db = firebase.database().ref(`Lobby/${lobbyKey}/players`);

            const listener = db.on('value', snapshot => {
                var fetchedTasks = [];

                fetchedTasks = snapshot.val();

                console.log(fetchedTasks[0]['game']);

                if (fetchedTasks[0]['game']) {
                    // 这里的写法和你注释位置的原有代码一致
                    props.inGame(true, lobbyKey);
                }else{
                    if (fetchedTasks.length != players.length)  setPlayers(fetchedTasks);
                }
            });

            return () => db.off('value', listener);
        }
    }, [lobbyCreated, lobbyKey, players.length, props.inGame]);
};

2. 逻辑验证 #

父组件App中传入的inGame属性本身是定义在App中的函数，子组件调用该函数时传入的参数会直接传递到App层，即可完成子组件向父组件回传值的需求。

内容的提问来源于stack exchange，提问作者AdriaAn