使用GraphQL进行反应选择

Question

如何将查询值放入选择选项？我试图制作数组的映射，但没有显示值。我知道这些值是导致查询日志的原因，但我不知道如何在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值映射到选择选项对象，例如：

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

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

文档here