反应输入字段值问题

Question

const [inputValue,setInputValue] = useState("")
handleChange = (e)=>{
 setInputValue(e.target.value)
console.log(e.target.value,inputValue)
}

这是一个简单的输入标签 onChange 函数，但是当记录值时 handleChange 函数内部的东西 e.target.value 是在字段和 inputValue 上输入的内容这是状态设置实际上是空的所以如果我在输入字段中输入 'd' 状态的值实际上是空的，下次我输入一些东西时它的值是 'd'我之前打过...请帮我解决这个问题

Answer 1

是的。状态改变是异步操作。 console.log立即执行。这意味着 console.log 在状态更新之前打印 inputValue。这就是为什么如果做第二个它显示以前的值。

最好使用 useEffect

检测状态变化

useEffect(()=>{
  console.log(inputValue)
},[inputValue])

Answer 2

“问题是我想做一个搜索栏，因此当我输入时让我们说“a”或者搜索不起作用，因为那个时候状态值是空的。 "

设置状态是一个异步过程。当您尝试在设置状态后立即记录状态时，您所做的只是在组件 re-rendered.

之前记录现有状态

@prasanth 的回答是正确的，即添加 useEffect 以监视输入状态的变化是记录新状态的唯一方法。

如果您正在尝试编写搜索栏，这里有一个快速设计的解决方案，可以从数组中过滤掉动物名称。

const { useState } = React;

function Example({ data }) {
  
  // Initialise the input state
  const [ input, setInput ] = useState('');

  // When the input value changes
  // update the state
  function handleChange(e) {
    setInput(e.target.value);
  }

  // `filter` the data using the input state,
  // and then `map` over that array to return
  // an array of JSX
  function getFiltered(input) {
    return data
      .filter(el => el.toLowerCase().includes(input))
      .map(el => <p>{el}</p>);
  }

  return (
    <div>
      <input
        type="text"
        placeholder="Find an animal"
        onChange={handleChange}
        value={input}
      />
      <div>{getFiltered(input)}</div>
    </div>
  );

}

const data=["Alpine Goat","Beaver","Carolina Parakeet","Dragonfish","Eurasian Wolf","Frilled Lizard","Gila Monster","Honduran White Bat","Immortal Jellyfish","Japanese Macaque","Kooikerhondje","Leopard Gecko","Megalodon","Nova Scotia Duck Tolling Retriever","Orb Weaver","Pink Fairy Armadillo","Rhombic Egg-Eater Snake","Satanic leaf-tailed gecko","Tibetan Fox","Umbrellabird","Vervet Monkey","Whoodle","Xoloitzcuintli","Yeti Crab","Zonkey"];  

ReactDOM.render(
  <Example data={data} />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

反应输入字段值问题

React input field value issue

javascript

reactjs