我一直在尝试从axios数组中获取两个字符串,但是不知何故它一直在给我一个错误,请帮帮我。
[我想要一个包含组的下拉列表,该组应该按opt组进行划分,并且每当我尝试运行我的代码时,它都会在return语句上不断给我一个错误。
import React,{Component,Fragment} from'react';从“ axios”导入axios]
class Home extends Component {
state= {
users: [],
showEmails: false,
showNames: false,
showUsername: false
}
componentDidMount(){
axios.get('https://jsonplaceholder.typicode.com/users')
.then (res => {
console.log(res)
this.setState({
users: res.data
})
})
}
handleChange = (e) => {
const value = e.target.value;
console.log(e)
debugger
}
render() {
const { users } = this.state;
const nameList = users.length ? (
<div className="input-group input-group-sm mb-2">
<select className="form-control form-control-sm" id="select1" multiple="multiple" >
{
users.map((user, i) => {
return(
<option key={i} value={user.name}> {user.name}
</option>
)
})
}
</select>
</div>
) : 'No Data';
const namesList = users.length ? (
<select className="custom-select">
{
Object.keys(users).map(ids =>{
return(
users [ids]. users.map((user, i) => {
return(
<Fragment>
<optgroup label="Names" >
<option key={i.id} value={user.name}> {user.name}
</option>
</optgroup>
<optgroup label=" Emails">
<option key={i.id} value={user.email}> {user.email}
</option>
</optgroup>
</Fragment>
)
})
)
})
}
</select>
) : 'No Data';
return (
<Fragment>
{namesList}
<hr />
{nameList}
</Fragment>
);
}
}
export default Home;
我一直在尝试从axios数组中获取两个字符串,但是不知何故它一直在给我一个错误,请帮帮我。我想要一个下拉菜单,其中包含按组划分的选项,当...
users
是一个数组,但是Object.keys不能与该数组一起使用,您可以像这样简单地在整个数组中进行映射;users.map((user, i) => {...