useEffect() 没有收到道具答案

【问题标题】：useEffect() not receiving propuseEffect() 没有收到道具
【发布时间】：2021-05-12 13:39:00
【问题描述】：

我对 React 和学习是半新的。

我实现了一个 useEffect() 钩子如下：

import { fetchDetails } from "../../ApiServices/Details";

export interface RemoveModalProps {
    id: number;
    isVisible: boolean;
    onHide: () => void;
    handleRemove: (resp: JsonResponseModel<ApiResponse>) => void;
}

const RemoveModal= ({ id, isVisible, onHide, handleRemove }: RemoveModalProps) => {
const [details, setDetails] = React.useState<DetailsModel>();

React.useEffect(() => {
    console.log(id);
    async function getDetails() {
        var details= await fetchDetails(id);
        console.log(details.Data);
        setDetails(details.Data);
    }
    getDetails();
}, []);

但是，由于我不太明白的原因，console.log(id) 返回 null。但是，我在 useEffect() 下方有以下功能

const handleSubmit = async () => {
    const isValid = formRef.current.checkValidity();
    setValidated(true);
    if (isValid) {
        console.log(id);
        setSaving(true);
        const resp = await removeDetails(id);
    }
};

并且这个 console.log(id) 正在记录正确的 id，所以很明显 id 被正确地作为道具传递。我的 useEffect 钩子无法使用道具有什么问题？

【问题讨论】：

这里的useEffect和handle submit有什么联系？
请问如何将 props 传递给 RemoveModal？
显然，当RemoveModal 组件挂载时，id 最初似乎为空，并且稍后它会在调用handleSubmit 回调时更新.我猜你寻求的答案在于父组件渲染 RemoveModal 以及它更新 id 属性的作用。

标签： reactjs typescript react-hooks

【解决方案1】：

useEffect 接受依赖数组作为第二个参数。依赖项值的变化将一次又一次地触发副作用中的功能。

在您的情况下，您需要 id 作为 useEffect 中的依赖值。所以

useEffect 需要看起来像这样

React.useEffect(() => {
    console.log(id);
    async function getDetails() {
        var details= await fetchDetails(id);
        console.log(details.Data);
        setDetails(details.Data);
    }
    getDetails();
}, [id]);

您可能需要处理id 中的空值/未定义值。我建议你做这样的事情。

React.useEffect(() => {
    if (!id) {
      return 
    }
    ... rest of hook
}, [id]);

我建议你使用 eslint 来警告 useEffect 缺少依赖项。

参考资料：

useEffect documenation

【讨论】：