Country-list:循环遍历country对象以呈现<options>返回错误

Question

我正在使用countries-list在我的反应(TSX)应用程序，以获得所有国家：https://github.com/annexare/Countries

目标是有一个<Form>，其中有一个<Select>字段，将国家呈现为<options>。

<Form.Control
  as="select"
  name="country"
  value={values.country}
  onChange={handleChange}
>                                          
  {
    Object.entries(countries).forEach(([key, val]) =>
      <option value={val.name} key={key}>
        {val.name}
      </option>
    )
  }
</Form.Control>

我的问题是，我得到了以下错误，并且不知道问题是什么，因为我对TypeScript相当陌生：

没有重载与此调用匹配。重载2中的1，‘(道具: Readonly，BsPrefixProps> & FormControlProps>>)：FormControl>'，给出了以下错误。输入'void‘不能指定键入'ReactNode’。重载2中的2，‘(道具: ReplaceProps，BsPrefixProps> & FormControlProps>，上下文？：any)：FormControl>'，给出了以下错误。输入'void‘不能指定键入'ReactNode’。

我还试图给key和val一个类型的Country (键: Country，val: Country)，但是这会给出更多的错误。

Answer 1

您应该使用map方法：

<Form.Control
  as="select"
  name="country"
  value={values.country}
  onChange={handleChange}
>                                          
  {
    Object.entries(countries).map((key, val) => (
      <option value={val.name} key={key}>
        {val.name}
      </option>
    ))
  }
</Form.Control>