使用Typescript和React在HTTP请求后填充下拉菜单

Question

我正在尝试使用我从后端检索的一些数据（在我的情况下为某些名称）填充下拉列表（特别是因为我使用React Bootstrap时选择的FormControl）。数据的结构是

{
  data: [
    {name: "name1"},
    {name: "name2"},
    ...
  ]
}

我可以检索数据，因为我可以映射结果并将每个名称放入数组中，但是下拉列表始终为空。我究竟做错了什么？这是我的代码：

useEffect(() => {
    fetch(`some/url`)
      .then(rsp => rsp.json())
      .then(data => namesArray = data.data.map(el => {  //data.data is correct, I'm sending the json this way
          return el.name;);
  });
return(
...
<Row>
   <Form.Label column sm={4} md={{ offset: 1 }} className="font-weight-bold">
      Names
   </Form.Label>
   <Col sm={8}>
     <FormControl
        size="sm"
        id="names-dropdown-"
        as="select"
        value={model}
        onChange={e => {
           setNames(e.target.value)  
        }}
       >
       {namesArray.map(el => (<option value={el}>{el}</option>))}
     </FormControl>
  </Col>
</Row>
...)

Answer 1

由于还使用TypeScript，因此需要定义组件状态的类型。查看API请求响应的结构，您应该创建一个接口或键入别名

interface NameObj {
  name: string;
}

然后，您可以使用此接口来定义状态：

const [namesArray, setNamesArray] = useState<NameObj[]>([]);

现在您已经定义了状态，当返回API请求的响应时，您将需要更新状态。由于似乎在加载组件时仅调用一次，因此应将一个空数组（[]）设置为依赖项数组，以便仅在安装组件时才调用它。您可以通过here了解有关依赖项数组的信息。

useEffect(() => {
    fetch(`some/url`)
      .then(rsp => rsp.json())
      .then(data => setRequestData(data.data)
  }, []);

最后，在返回时，您可以保留其余内容，并进行以下更改。这将迭代namesArray状态并呈现选项。

{namesArray.map(({ name }) => (<option value={name}>{name}</option>))}

Answer 2

您可能要使用useState挂钩。当您从网络请求中提取数据时，您可以执行以下操作：

  const [ requestData, setRequestData] = useState(0);

....

useEffect(() => {
    fetch(`some/url`)
      .then(rsp => rsp.json())
      .then(data => setRequestData(data.data))
  });

然后在您的选择/选项中

  <FormControl
        size="sm"
        id="names-dropdown-"
        as="select"
        value={model}
        onChange={e => {
           setNames(e.target.value)  
        }}
       >
       {requestData? requestData.map(el => (<option value={el}>{el}</option>))}
                   : <p>Loading</p>}
     </FormControl>

这是一种通用结构方法，需要在映射时检查包含数据的var是否为空。网络通话结束后，它将使用useState挂钩重新呈现现在获得的数据。

我可能语法错误。没有沙箱很难做到。