如何将参数从 useEffect 传递给 React 中的子组件？答案

【问题标题】：How to pass a parameter from useEffect to child component in React?如何将参数从 useEffect 传递给 React 中的子组件？
【发布时间】：2022-01-11 16:15:24
【问题描述】：

我的useEffect方法是：

useEffect(() => {
async function getRoomDetails(){
  const db = getFirestore();
  const querySnapshot = await getDocs(collection(db, "rooms"));
  querySnapshot.forEach((doc)=>{
    console.log('Document');
    console.log(doc.id);
    console.log(doc.data().name);
    var channelNameData = doc.data().name;
  })
}
async function getRoomMessages() {
  const db = getFirestore();

  const roomMessages =
    roomId &&
    query(
      collection(db, "rooms", roomId, "messages"),
      orderBy("timestamp", "asc")
    );
  const querySnapShot = await getDocs(roomMessages);
  querySnapShot.forEach((doc) => {
    console.log(doc.id, "=>", doc.data());
  });
    }
     getRoomDetails();
     getRoomMessages();
   }, []);

我想将channelNameData 传递给 ChatInput，如

 <ChatInput
     channelName={channelNameData}
    channelId={roomId}
  />

我该怎么做？我还想避免从内部分配给“channelNameData”变量每次渲染错误后，React Hook useEffect 都会丢失。

【问题讨论】：

标签： javascript reactjs firebase-realtime-database react-hooks

【解决方案1】：

使用useState 创建一个状态变量。

在 useEffect 挂钩中修改该变量。

然后该变量将在您组件的其余部分的范围内，您可以将其作为道具传递。

确保在效果挂钩运行之前处理默认状态（例如，使用合理的默认值或指示应呈现 <Loading /> 组件而不是 <ChatInput /> 的值）

【讨论】：

谢谢你。 :)

【解决方案2】：

您可以利用 useState 挂钩创建一个变量来存储 channelNameData。

import { useState } from 'react';

const [channelNameDataState, setChannelNameDataState] = useState(null)

在你的 useEffect 中，你可以有一行设置 channelNameDataState。

setChannelNameDataState(channelNameData)

然后你将把这个状态传递给子组件

<ChatInput
  channelName={channelNameDataState}
  channelId={roomId}
/>

至于防止对 channelNameData 变量的赋值丢失，您应该能够将 useState 挂钩与 localState 结合使用，以确保您可以持久化状态。

【讨论】：

【解决方案3】：

在效果内创建状态变量并赋值，

const [channelNameData, setChannelNameData] = useState([]);   

  useEffect(() => {
    async function getRoomDetails(){
      const db = getFirestore();
      const querySnapshot = await getDocs(collection(db, "rooms"));
      querySnapshot.forEach((doc)=>{
        console.log('Document');
        console.log(doc.id);
        console.log(doc.data().name);
        //var channelNameData = doc.data().name;
        setChannelNameData(doc.data().name)
      })
    }
    async function getRoomMessages() {
      const db = getFirestore();
    
      const roomMessages =
        roomId &&
        query(
          collection(db, "rooms", roomId, "messages"),
          orderBy("timestamp", "asc")
        );
      const querySnapShot = await getDocs(roomMessages);
      querySnapShot.forEach((doc) => {
        console.log(doc.id, "=>", doc.data());
      });
    }
    
    getRoomDetails();
    getRoomMessages();
    }, []);

在 jsx 中，

<ChatInput
  channelName={channelNameDataState}
  channelId={roomId}
/>

【讨论】：

是的，但修改 ChatInput 以传入“channelNameData”而不是“channelNameDataState”