Question

我正在尝试为我的React.js应用程序创建一个搜索栏。

我已将app.js的getSearch()方法传递给子组件导航以检索输入值。

在getSearch()方法中，有setState({searchTerm:e.target.value})是检索到的值，然后我在fetchData()和{{之后，立即调用app.js的setState()方法1}}。

在getSearch()方法中将

作为fetchData()的主体传递给this.state.searchTerm，但是当我输入内容并单击Enter时，它为我提供了fetch()的先前值，而不是最新更新用户输入的值。

我在做什么错？我正在粘贴我的app.js进行审核：

this.state.searchTerm

Answer 1

如果需要在fetchIGBD方法中使用状态，则需要在callback的{{1}}参数中调用状态。这是必需的，因为setState是异步的。

setState

或者如果您需要向其传递参数

  getSearch = e => {
    if (e.key === "Enter") {
      this.setState({
        searchTerm: e.target.value
      }, this.fetchIGBD);
    }
  };

Answer 2

您可以使用以下内容：

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    protected function authenticated()
    {
        // Update last_session after logged-in
        User::find(Auth::id())->update(['laravel_session'=>Session::getId()]);
    }

}

this.setState({ searchTerm: e.target.value }, () => { this.fetchIGBD() });函数是异步的，这意味着它不会立即执行。

Answer 3

调用fetchIGBD的另一种方式是使用setState方法的回调。它会确保你得到searchTerm的更新值。它会在setState完成后触发。

   getSearch = e => {
     if (e.key === "Enter") {
      this.setState({
        searchTerm: e.target.value
      },function(){
        this.fetchIGBD()
      }
     );
    
  }
};

调用setState后的事件为我提供了先前的状态值

3 个答案: