我正在使用fixer api开发货币转换器网络应用程序

Question

我已经成功地获取了所有值。但我想将所有的值{currencyOptions}填充到"；选择"；另一个组件中的选项。我该怎么做。

const [currencyOptions, setCurrencyOptions] = useState([]);
console.log(currencyOptions);

<div className="App">
<h1>Convert Currency</h1>
<CurrencyRow currencyOptions={currencyOptions} />
<SiConvertio className="convert" />
<CurrencyRow currencyOptions={currencyOptions} />
</div>

这是我的货币期权组件

const CurrencyRow = () => {
return (
//
<Container>
<Row>
<Input type="number" className="input" />
<select>
<option value="abx">abc</option>
</select>
</Row>
</Container>
);
};

Answer 1

您希望用currencyOptions状态填充下拉列表。假设您的状态包含所有项目，并且它是一个列表，那么在呈现组件时，您希望为每个项目返回一个option元素，类似于：

currencyOptions.map((currencyOption, index) => (
<option key={index} value={currencyOption}>{currencyOption}</option>
));

如果您有一个id，也可以尝试使用一个id作为元素key，而不是index。