使用 useState 获取 console.log 中的先前状态

Question

当我在 home.js 中执行 console.log 时，它会显示 selectSprint 的前第二个状态。你能解释一下 useState 钩子有什么问题吗？ 我在不同的文件中有两个组件，一个是 home.js，另一个是 iteration.js。在 home.js 中，代码如下所示：

`

---------
export default function DataTable(){
const [selectSprint, setSelectSprint] =useState("none")
useEffect(()=>{
  console.log(selectSprint)})
return (
       <>
             <Interation    setSelectSprint = {setSelectSprint}/>
      </>
)
}

在 Iteration.js 中 `

  export default function Iteration(props){
        const handleChange= (event)={
              props.setSelectSprint(sprint[value-1]
         }
         return (
               <Select value={value} onChange={handleChange}>
                      <MenuItem value={0}>
                              2023
                    </MenuItem>  
                       <MenuItem value={1}>
                             2024
                    </MenuItem>  
                      <MenuItem value={2}>
                              2025
                    </MenuItem>  
                       <MenuItem value={3}>
                          2026
                    </MenuItem>                 
              </Select>
         )
    }`

例如：我们只举一个案例。意味着我已经点击了 2024 它显示未定义。 对于 2025 年，它显示 2023 年。 对于 2023 年，它显示 2024 年。 对于 2025，它显示 2025。 它采用前一个第二个值。

`

useEffect(() => {
         console.log("Current state:", selectSprint);
     }, [selectSprint]);`

已经尝试过，但问题是一样的。

Answer 1

请将导致采用先前值的

sprint[value-1]

更改为

sprint[value]

。

import { useState } from 'react';

export default function Iteration(props: any) {
  const [value, setValue] = useState(0);
  const sprint = ['2023', '2024', '2025', '2026'];
  const handleChange: any = (event) => {
    const value = event && event.target && event.target.value;
    setValue(value);
    console.log(value);
    props.setSelectSprint(sprint[value]);
  };
  return (
    <select value={value} onChange={handleChange}>
      <option value={0}>2023</option>
      <option value={1}>2024</option>
      <option value={2}>2025</option>
      <option value={3}>2026</option>
    </select>
  );
}

堆栈闪电战