我如何在axios数组中插入多个循环?? [处于保留状态]

问题描述 投票:-1回答:1

我一直在尝试从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数组中获取两个字符串,但是不知何故它一直在给我一个错误,请帮帮我。我想要一个下拉菜单,其中包含按组划分的选项,当...

javascript arrays reactjs select axios
1个回答
0
投票

users是一个数组,但是Object.keys不能与该数组一起使用,您可以像这样简单地在整个数组中进行映射;users.map((user, i) => {...

© www.soinside.com 2019 - 2024. All rights reserved.