如何在 axios 陣列中插入多個循環。？ [等候接聽]

Question

我一直試圖從 axios 數組中取出兩個字符串，但不知何故它一直給我一個錯誤，請幫助我。

我想要一個包含應該由 opt 組划分的組的下拉列表，並且當我嘗試運行我的代碼時，它一直在返回語句上給我一個錯誤。

從'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; 

Answer 1

users是一個數組，但 Object.keys 不適用於數組，您可以像這樣簡單地通過數組 map； users.map((user, i) => {...