Question

我在尝试将Apollo Client在一个路由组件中查询的值传递给另一个路由组件以用作查询中的变量时遇到了麻烦。确切的错误是：“未捕获的TypeError：无法读取未定义的属性'名称'”。

共有三个组成部分：

App，路由器的根组件。
ComponentA，它通过ID和名称查询一组数据，以显示每个项目的卡片列表。每个项目都有指向ComponentB的链接。
组件B，它必须使用ComponentA引用的名称作为变量来查询更多数据，以显示该项目中的更多数据。

App.tsx

export const App: React.FunctionComponent = () => {
  return (
    <BrowserRouter>
      <>
        <Main>
          <Switch>
            <Route exact path="/" component={ComponentA} />
            <Route path="/:name" component={ComponentB} />
          </Switch>
        </Main>
      </>
    </BrowserRouter>
  );
};

ComponentA.tsx

const GET_DATAS = gql`
  query GetDatas {
    getDatas {
      _id
      name
    }
  }
`;

interface Data {
  _id: string;
  name: string;
}

export const Home: React.FunctionComponent = () => {
  const { data } = useQuery(GET_DATAS);

  return (
    <>
      <div>
        {data.getDatas.map((data: Data) => (
          <Link to={`/${data.name}`} key={data._id}>
            <Card name={data.name} />
          </Link>
        ))}
      </div>
    </>
  );
};

ComponentB.tsx

const GET_DATA = gql`
  query GetData($name: String!) {
    getData(name: $name) {
      _id
      name
      year
      color
    }
  }
`;

interface Props {
  name: string;
}

export const DataDetails: React.FunctionComponent<Props> = (props: Props) => {
  const { data } = useQuery(GET_DATA, {
    variables: { name },
  });

  return (
    <>
      <div>
        <H1>{data.getData.name}</H1>
        <p>{data.getData.year}</p>
        <p>{data.getData.color}</p>
      </div>
    </>
  );
};

当我在Playground中测试它们时，查询效果很好，我尝试使用本地状态并通过带有Link的props传递了结果，但是我仍然不知道如何传递值以在ComponentB查询中使用

谢谢！

Answer 1

修复?我最终选择了仅获取URL，对其进行了一些清理，并将其用作查询的变量以及添加加载和错误状态的方法：

export const DataDetails: React.FunctionComponent = () => {
  const dirtyPath = location.pathname;
  const cleanPath = dirtyPath.replace(/%20/g, ' ').replace(/\//g, '');

  const { data, loading, error } = useQuery(GET_DATA, {
    variables: { name: cleanPath },
  });

  return (
    ...
  );
};

使用React Router时可用的另一种解决方案是：

export const DataDetails: React.FunctionComponent = (props) => {
  const { data, loading, error } = useQuery(GET_DATA, {
    variables: { name: props.match.params.name },
  });

  return (
    ...
  );
};

如何将在一个组件中查询的数据传递给另一组件以用作查询变量？

1 个答案: