从输入中获取值的元素仅在我第二次按下回车键后更新.为什么会发生这种事?-ReactJS

Question

我只是想知道如何做我的待办事项列表，目前只是在尝试添加包含给定文本输入元素的文本的元素。

该问题在本片段中介绍：https://i.stack.imgur.com/JPpKE.jpg

import { useState } from "react"
function App() {
const [inputVal, setInputVal] = useState('')
const [tasks, setTasks] = useState([])
console.log(inputVal);
return <>
<Input valor = {setInputVal} inputVal={inputVal} tasks={tasks} setTasks={setTasks}/>
{
tasks.map(e=>(
<Display text={e.text}/>
))
}
</>
}
const Input = ({valor, inputVal, tasks, setTasks}) =>{
const keyPressed = (val) =>{
if(val.key === 'Enter'){
valor(val.target.value)
setTasks([
...tasks, {text: inputVal, key: Math.random()*2000}
])
}
}
return <>
<input type="text" onKeyUp={keyPressed}/>
</>
}
const Display = ({text}) => {
return <>
<h1>{text}</h1>
</>
}
export default App;

Answer 1

我相信之所以会发生这种情况，是因为您在输入中没有使用onChange，所以您的状态会变得过时，并且总是落后一个值。

我已经整理了代码并添加了一些缺失的部分(比如input元素中的value属性(。然后，我将负责提交的函数拆分为两个函数——一个函数处理更改输入值，另一个函数将值作为新条目提交到任务列表

import { useState } from "react"
const Input = ({ input, handleChange, tasks, setTasks }) => {
const onSubmit = (e) => {
if (e.key === 'Enter') {
setTasks([
...tasks, 
{ text: input, key: Math.random()*2000 }
])
setInput('');
}
}
const handleChange = (e) => {
setInput(e.target.value)
}

return <input type="text" onKeyUp={onSubmit} onChange={handleChange} value={input}/>
}

const Display = ({ text }) => <h1>{text}</h1>
const App = () => {
const [input, setInput] = useState('')
const [tasks, setTasks] = useState([])
return <>
<Input input={input} setInput={setInput} tasks={tasks} setTasks={setTasks}/>
{tasks.map((task) => (
<Display text={task.text}/>
))
}
</>
}

Answer 2

当keyPressed被调用时，您的代码会调用setInputVal(valor(和setTasks。在setInputVal实际有时间更新状态之前调用了setTask，因此它设置了"旧"值。这是因为状态设置是异步的，并且代码在设置任务之前不会等待inputVal的设置。