reactjs - 通过 props 中的引用从 Firebase 获取数据

Question

我通过道具获得了对某些文档的引用。当我的组件正在渲染时，我想从 firebase 获取这些数据。我试过这样做：

const EventListElement = props => {

    const [object, setObject] = useState(async () => {
        let object_id, object_info;
        return await props.event.obiekt.get().then(resp=>{
            object_id = resp.id;
            object_info = resp.data();
            object_info = {
                ...object_info,
                id: object_id
            }
            console.log(object_info)
            return object_info;
        })
    })

    return(
        <div className={styles.EventListElementContainer}>
            {object.nazwa_wlasna}
        </div>
    )
}

export default EventListElement;

但它没有用。我的数据显示在 上console.log()，但没有以这种object状态保存，我无法从return()我的组件中获取它们。

标签： reactjsfirebasereference

Answer 1

useState期望传入一个值而不是异步函数。至少尝试重组代码以将异步操作移出useState(). 当 props 发生变化时，您可以使用钩子useEffect来执行异步操作：

useEffect(async () => {
    let object_id, object_info;
    await props.event.obiekt.get().then(resp=>{
        object_id = resp.id;
        object_info = resp.data();
        object_info = {
            ...object_info,
            id: object_id
        }
        console.log(object_info);
        setObject(object_info);
    })
  }
}, [props]);

// Initialize with default value    
const [object, setObject] = useState({ nazwa_wlasna: '' });

希望这会有所帮助！