时间戳

首页 > 解决方案 > 使用反应钩子重新加载组件

reactjs - 使用反应钩子重新加载组件

问题描述

我想问你修改表单数据后如何重新加载组件，然后我有我的组件：

export default function MyComponent() {
    const url = "/api/1";
    const [resData, setResData] = useState(null);

    useEffect(() => {
        const jwt = getJwt();
        const fetchData = async () => {
            const resP = await axios(url);
            setResData(resP.data);
        };
        fetchData();
    }, []);

    return <EditComponent={resData} />
}

该组件将我的数据传递给“EditCompoent”子组件，其中有一个表单，其中填充了来自父组件的数据，我可以修改其中有一个保存按钮，当我单击该按钮时，我可以将修改后的数据发送到我的笨蛋：

const handleConfirm = () => {
    axios.put(url, data).then((res) => {
      //Reload Component
    })
  }

我希望能够在此工作成功后立即重新加载父组件我该怎么办？我不想重新加载整个页面我只想重新加载“MyComponent”的父组件，我希望我已经很好地提出了这个问题。

标签： reactjs

解决方案

我会将整个useEffect回调传递下来，以便handleConfirm可以在 之后再次调用它axios.put，之后resData父级中的状态将被更新：

export default function MyComponent() {
    const url = "/api/1";
    const [resData, setResData] = useState(null);
    const tryLoginJWT = () => {
        const jwt = getJwt();
        const resP = await axios(url);
        setResData(resP.data);
    };
    useEffect(tryLoginJWT, []);

    return <EditComponent {...{ resData, tryLoginJWT }} />
}

const handleConfirm = () => {
    axios.put(url, data)
        .then(tryLoginJWT)
        .catch(handleErrors); // don't forget to catch here in case there's a problem
}

推荐阅读