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

Question

我安慰了日志并在 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>)

Answer 1

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

Answer 2

我将 {user} 更改为用户，数据也是如此。

现在可以使用了，我添加了这个 return 语句：

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

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

My userdetails array is showing undefined therefore it is not rendering in map

arrays

undefined

reactjs

mern

axios