输入值 onChange - React Hooks

Question

I'm trying to collect the value typed in a input box, but when I use onChange I can only get the previous value. For example after I just typed "text" the latest value to be collected would be "tex"

import React, {useState} from 'react';
import './SearchBar.css';

const SearchBar = (props) => {

    const [input, setInput] = useState('');

    const onChange = (e) => {
        setInput(e.currentTarget.value);
        console.log(input);
    }

    let sugestionList = (
        <ul>
            <li>item 1</li>
            <li>item 2</li>
        </ul>
    )



    return(
        <div className="search-bar">
            <input type="text" placeholder={props.placeholder} onChange={onChange}/>
            {sugestionList}
        </div>

    )
}

Answer 1

That's because updating a state is an asynchronous task. To get the latest state you can use useEffect() hook.

useEffect(() => {console.log("input state is", input)}, [input]) //add the state in dependency array and this useEffect will run whenever state changes//

Answer 2

It's happening because updating state is asynchronous and you are checking(console.log) in the same onChange function that's why it's not giving proper input value but it's working/updating properly.

instead of doing console inside onChange you can check here -

const onChange = (e) => {
   setInput(e.currentTarget.value);
  }
  console.log(input)
  return(
      <div className="search-bar">
          <input type="text" placeholder={'props.placeholder'} onChange={onChange}/>
          {sugestionList}
      </div>
  )

another solution is using useEffect as already posted one solution by Atin.