组件未使用 React Router 更新状态更改

Question

我正在使用 React 和 React 路由器。我在 App.js 中定义了所有数据获取和路由。 我正在单击嵌套子组件<ChildOfChild /> 中的按钮，该按钮在单击按钮（使用上下文 API 向下传递函数）时刷新我的数据，并且在我的顶级组件 App.js 中发生了获取请求（我有一个控制台。在那里登录，所以它肯定会在点击时获取）。但是数据的刷新状态永远不会到达<ChildOfChild /> 组件。相反，它会刷新旧状态。我究竟做错了什么。以及如何确保<Link> 中的状态在状态更新时刷新。 我希望在单击按钮时更新 item.name 值。

应用组件

• 已获取所有路由和数据
• 使用 Reacts Context API，我用它来将我的获取传递给子组件
• 低于 App 组件的基本形状。

import React, {useEffect, useState} from "react";

export const FetchContext = React.createContext();
export const DataContext = React.createContext();

const App = () => {

const [data, setData] = useState([false, "idle", [], null]);

  useEffect(() => {
    fetchData()
  }, []);

  const fetchData = async () => {
    setData([true, "fetching", [], null]);
    try {
      const res = await axios.get(
        `${process.env.REACT_APP_API}/api/sample/`,
        {
          headers: { Authorization: `AUTHTOKEN` },
        }
      );
      console.log("APP.js - FETCH DATA", res.data)
      setData([false, "fetched", res.data, null]);
    } catch (err) {
      setData([false, "fetched", [], err]);
    }
  };

 return (
  <Router>
    <DataContext.Provider value={data}>
      <FetchContext.Provider value={fetchData}>
        <Switch>
          <Route exact path="/sample-page/" component={Child} />
          <Route exact path="/sample-page/:id" component={ChildOfChild} />
        </Switch>
      </FetchContext.Provider>
    </DataContext.Provider>
  </Router>
  )
}

子组件

import { DataContext } from "../App";

const Child = () => {
  const [isDataLoading, dataStatus, data, dataFetchError] = useContext(DataContext);
  const [projectsData, setProjectsData] = useState([]);
  {
    data.map((item) => (
      <Link
        to={{
          pathname: `/sampe-page/${item.id}`,
          state: { item: item },
        }}
      >
        {item.name}
      </Link>
    ));
  }

子组件的子组件

import { FetchContext } from "../App";

const ChildOfChild = (props) => {
    const getData = useContext(FetchContext);
    const [item, setItem] = useState({});
    const [isItemLoaded, setIsItemLoaded] = useState(false);

    useEffect(() => {
        if (props.location.state.item) {
          setItem(props.location.state.item);
          setIsItemLoaded(true);
        }
    }, [props]);

    return (
        <div>
            <button onClick={() => getData()}Refresh Data</button>
            <div>{item.name}</div>
        </div>
    )
}
 

Answer 1

问题

ChildOfChild 渲染的特定数据项仅通过从"/sample-page/" 到"/sample-page/:id" 的路由转换发送，ChildOfChild 在本地状态缓存它的副本。更新DataContext 中的data 状态不会更新ChildOfChild 持有的本地化副本。

建议

由于您已经在唯一标识它的路径上呈现ChildOfChild，（回想一下，Child 推送到 "/sample-page/${item.id}"）您可以使用此路由的 id 从 @ 访问特定数据项987654333@。无需同时以路由状态发送整个数据项。

孩子

只需按项目链接到新页面id。

<Link to={`/sampe-page/${item.id}`}>{item.name}</Link>

ChildOfChild

通过useContext 钩子将DataContext 添加到组件中。 使用props.match 访问路由的id 匹配参数。

import { FetchContext } from "../App";
import { DataContext } from "../App";

const ChildOfChild = (props) => {
  const getData = useContext(FetchContext);
  const [,, data ] = useContext(DataContext);

  const [item, setItem] = useState({});
  const [isItemLoaded, setIsItemLoaded] = useState(false);

  useEffect(() => {
    const { match: { params: { id } } } = props;
    if (id) {
      setItem(data.find(item => item.id === id));
      setIsItemLoaded(true);
    }
  }, [data, props]);

  return (
    <div>
      <button onClick={getData}Refresh Data<button />
      <div>{item?.name}<div>
    </div>
  )
}

useEffect 将确保当上下文或道具中的 data 中的一个或两者更新时，item 状态将使用最新的 data 和 id 参数进行更新。

只是关于使用Switch 组件、路由路径顺序和特异性问题的旁注。 Switch 将匹配并渲染 第一个 与路径匹配的组件。您需要在 less 特定路径之前订购您的 more 特定路径。这也使您无需将exact 属性添加到每个Route。现在Switch 可以尝试在不太具体的路径“/sample-page”之前匹配更具体的路径“/sample-page/123”。

<Router>
  <DataContext.Provider value={data}>
    <FetchContext.Provider value={fetchData}>
      <Switch>
        <Route path="/sample-page/:id" component={ChildOfChild} />
        <Route path="/sample-page/" component={Child} />
      </Switch>
    </FetchContext.Provider>
  </DataContext.Provider>
</Router>

Answer 2

我刚刚在这里重写了你的代码，我已经使用randomuser.me/api 来获取数据

看看这里，它有一些小的拼写错误，但这里看起来还可以

https://codesandbox.io/s/modest-paper-nde5c?file=/src/Child.js