当我输入搜索时，我的用户详细信息未呈现用户列表

如何解决当我输入搜索时，我的用户详细信息未呈现用户列表

还有一个错误 TypeError：无法解构 'object null' 的属性 'handleShow'，因为它为 null。 我安慰日志时的输出是 公关 SearchModal.js:35 {用户名：“pr”} SearchModal.js:38 [{…}]0: {id: "602df77cea2b563d7ceda4ac",username: "pratik",email: "[e-mail]"}length: 1__proto_: Array(0 ) 它也不是在我输入 p 时搜索它给出的搜索：''，当我添加 prat 然后搜索：'pra' only 它也不是呈现用户名，只是检查 userdetails.map 它是控制台记录详细信息但不在页面上呈现

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 })
}

async onTextboxChangeSearch(event) {

  this.setState({
      search: event.target.value
  });
  let {search,userdetails} = this.state;
  console.log(search)


  const data = {username:search};
  console.log(data)
  let SearchStatus = await SearchUser(data);
  userdetails=SearchStatus.user
  console.log(userdetails);
}

render() {
    let {search,userdetails}= this.state;

    return (
       <div>
          <Modal show={this.state.show} onHide={this.handleClose}>
             <Modal.Header closeButton>
               <Modal.Title>
                 <input 
                  type="text" 
                  placeholder="Search.."
                  value={search}
                  onChange={this.onTextboxChangeSearch}
                 ></input>
               </Modal.Title>
             </Modal.Header>
             <Modal.Body>
               <h3>Users</h3>
               <div>
               <ul>
                {userdetails.map(element => {
                  <li>{element.username}</li>
                })}
              </ul>
               </div>
             </Modal.Body>
          </Modal>
        </div>
    )
  }
}
export default SearchModal;

仪表板

import React,{ Component } from 'react';
import { Link,Redirect } from 'react-router-dom';
import UserService from "../services/userservice";
import SearchModal from './SearchModal'

export default class Dashboard extends Component{

    constructor(props) {
        super(props);
    
        this.state = {
            currentUser: UserService.getCurrentUser(),isLoading:false,};

        this.logOut = this.logOut.bind(this);
        this.onClick = this.onClick.bind(this);

    }

    logOut() {
        UserService.logout()
    }

    SearchModalRef = ({handleShow}) => {
        this.showModal = handleShow;
    }
    
    onClick = () => {
        this.showModal();
    }
     

    render(){
        const { currentUser,isLoading } = this.state;
        console.log(currentUser)

        if (isLoading) {
            return (<div><p>Loading...</p></div>);
        }

        if(!currentUser){
            return(
                <div>
                    <Redirect  to='/login' />
                </div>
            )
        }
        else{
            return(
                <div>
                    <header>
                        <h1>Dashboard</h1>
                        {' '}
                        <div>
                            <Link to={`/dashboard/profile/:${currentUser.user._id}`}>Profile</Link>
                        </div>
                        {' '}
                        <div>
                            <Link to="/login" onClick={this.logOut}>LogOut</Link>
                        </div>
                        {' '}
                        
                        <SearchModal  ref={this.SearchModalRef} ></SearchModal>
                        <button type="button" onClick={this.onClick}>
                        Search
                        </button>
                    </header>
                    <div>

                    </div>
                </div>
            );
        }
    }
}

解决方法

问题

当我输入 p 时它没有搜索，它给出了搜索：''，当我添加时 prat 然后搜索 : 'pra' only

React 状态更新是异步的，并且在渲染周期之间进行批处理。这意味着当您将状态更新排入队列时，它在下一个渲染周期之前不可用。在同一函数中对状态的任何进一步引用都将是当前渲染周期的状态值。

async onTextboxChangeSearch(event) {
  this.setState({
    search: event.target.value // <-- next state
  });
  let {search,userdetails} = this.state; // <-- still current state!
  console.log(search)

  const data = {username:search};
  console.log(data)
  let SearchStatus = await SearchUser(data);
  userdetails=SearchStatus.user
  console.log(userdetails);
}

解决方案

我建议将搜索逻辑分解为它自己的函数，以便在状态更新时由 componentDidUpdate 生命周期方法调用。

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 };

  const { user } = await SearchUser(data);
  this.setState(prevState => ({
    userdetails: [...prevState.userdetails,user],// append user
  }));
}

componentDidUpdate(prevProps,prevState) {
  if (prevState.search !== this.state.search) {
    this.searchForUser(); // <-- (2) search state updated,do search for user
  }
}