javascript - 使用 GraphQL 进行 React-Select

Question

如何将查询值放入选择选项中？我尝试制作数组的映射，但值没有出现。我知道这些值会导致查询中的日志，但我不知道如何在选择中加载它们。

  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 值映射到选择选项对象，例如:

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

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

文档 here