reactjs - React Hooks：在 goBack() 上刷新数据

Question

我有两个屏幕，A 和 B：

A -> B

B 添加数据，而 A 有一个包含该数据的表。当我在 中添加数据时B，我goBack()从useHistory()反应钩子中调用。但是，A当我将数据添加到数据库时不会刷新，因为默认情况下它不应该。

如果我A真的在B. 我该怎么做呢？我如何检测何时goBack()被调用A，并且仅在满足某些条件时才更新？

标签： reactjsreact-router-dom

Answer 1

可能的解决方案，您可以将组件包装到上下文 - HOC。或者您可以使用其他东西而不是 goBack，使用参数推送，使用状态的简单 HOC，传递道具......

const DataContext = React.createContext(null);

// or pass props.children to DataContext.Provider, or props to A,B...
function DataApp() {
    const [refresh, setRefresh] = useState(false);
    const toggleRefresh = () => { setRefresh(refresh => !refresh) };
    <DataContext.Provider value={{refresh, toggleRefresh}}>
        <A />
        <B />
    </DataContext.Provider>
}


function A() {
    const { refresh, toggleRefresh } = React.useContext(DataContext);
    useEffect(() => { /* Should be data refreshed? */ }, []);
}

function B() {
    const { refresh, toggleRefresh } = React.useContext(DataContext);
    const submitData = () => { toggleRefresh(); /* goBack() */ };
}