我的 userdetails 数组显示未定义，因此未在地图中呈现

如何解决我的 userdetails 数组显示未定义，因此未在地图中呈现

我安慰了日志并在 render() 中添加了注释。如何定义它以便在模态正文中呈现用户用户名？

这是我的控制台日志输出 [] SearchModal.js:37 undefined 这是针对渲染 SearchModal.js:53 (3) [{…},{…},{…}] 之后的用户详细信息行>

import React,{ Component } from 'react';
import { SearchUser } from '../services/SearchService';
import {Modal} from 'react-bootstrap';

class SearchModal extends Component {
  constructor(props){
    super(props);
    this.state = {
        show: false,search: '',userdetails:[]
    }

    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.onTextboxChangeSearch = this.onTextboxChangeSearch.bind(this);
}

handleShow() {
    this.setState({ show: true })
}
handleClose(){
    this.setState({ show: false })
}

onTextboxChangeSearch(event) {
  const { value } = event.target;
  this.setState({
    search: value // <-- (1) update state
  });
}


SearchForUser = async () => { // <-- (3) refactored search function
  const { search,userdetails } = this.state;
  const {data} = { username: search };
  console.log(data)

  const { user } = await SearchUser(data);
  this.setState({ userdetails: user });
  console.log(userdetails)
}

componentDidUpdate(prevProps,prevState) {
  if (prevState.search !== this.state.search) {
    this.SearchForUser(); // <-- (2) search state updated,do search for user
  }
}
render() {
    let {search,userdetails}= this.state;
    console.log(userdetails)  //showing undefined
    return (<Modal.Body>
               <h3>Users</h3>
               <div>
                <ul className="collection">
                  {userdetails && userdetails.map((element,i) => {
                    <li key={i}>{element.username}</li>
                  })}
                </ul>
               </div>
             </Modal.Body>)

解决方法

console.log(user) 尝试首先在 SearchForUser 函数中控制台用户

,

我将 {user} 更改为 user 并与数据相同。

它现在可以工作了，我添加了这个返回语句：

return(li key={i}>{element.username}</li>);