React-Select 与 GraphQL

Question

如何将查询值放入 select 选项中？我试图制作数组的地图，但没有出现值。我知道这些值会导致查询中的日志，但我不知道如何在 select.

中加载它们

  const { data: admData, loading } = useQuery(GET_DIRECTOR_USERS, {
    onError: (error) => {
      console.log("erro", error);
    },
    onCompleted: (users) => {
      console.log(admData);
    },
  });
  
  
  
        return (
        <Container>
          <Form onSubmit={handleSubmit}>
            <Label>ASSOCIADO A QUAL DIRETOR</Label>
            {!loading && (
              <Select
                className="s"
                theme={(theme) => ({
                  ...theme,
                  borderRadius: 10,
                  colors: {
                    ...theme.colors,
                    primary: "#d3d3d3",
                  },
                })}
                name="adm_director_id"
                placeholder=""
                options={admData.getDirectorUsers.map(
                  (users: any) => users.name
                )}
              />
            )}
          </Form>
        </Container>
      );

Answer 1

您应该将 API 值映射到 Select 选项对象，例如：

options={admData.getDirectorUsers.map(user => ({ label: user.name, value: user.id });

在 react-select 中，每个选项都应该是一个对象 { label: string, value: string }（您甚至可以在对象中包含其他键，但这些是必需的）。

文档here

React-Select 与 GraphQL

React-Select with GraphQL

javascript

typescript

reactjs

react-select

graphql