如何在react js中使用map在选择选项中显示数组值?

Question

我试图在react js中显示<option>标签中数组的值。到目前为止，我失败了。

<select>
{
op.map(value => (<option key={value} value={value}>{value}</option>))
}
</select>

op是一个数组。Op = 1,2,3。数组op是这样的

for (let i=0; i<Math.ceil(response.data.length/end); i++) {
op[i] = i+1;
}

当我检查时，只看到这个:

<select></select>

Answer 1

请查看(select)示例

Math.ceil(response.data.length/end);需要根据您的需要更换。

如果你需要做一个ajax调用，这样做:

import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [selOption, setSelOption] = useState(1);
const [op, setOptions] = useState([]);
useEffect(() => {
//make ajax call here.
//set this on success of the ajax call
/*axios.get().then(()=>{
/here.
}) 
*/
let o = [];
for (let i = 0; i < 5; i++) {
o[i] = i + 1;
}
setOptions(o);
}, []);
return (
<div className="App">
<select
value={selOption}
onChange={(e) => {
setSelOption(e.target.value);
}}
>
{op.map((value) => (
<option key={value} value={value}>
{value}
</option>
))}
</select>
Selected:{selOption}
</div>
);
}

演示的简单代码片段

import { useState } from "react";
import "./styles.css";
export default function App() {
const [selOption, setSelOption] = useState(1);
let op = [];
for (let i = 0; i < 5; i++) {
op[i] = i + 1;
}
return (
<div className="App"><select
value={selOption}
onChange={(e) => {
setSelOption(e.target.value);
}}
>
{op.map((value) => (
<option key={value} value={value}>
{value}
</option>
))}
</select>
Selected:{selOption}
</div>
);
}