Question

首先，如果我无法正确解释问题，我会道歉。我也知道 useState 是异步的。我试图尽可能地简化代码。所以基本上，在下面的代码中，我有一个方法 handleSubCatChange ，它在 onChange 事件上运行。 Whenever a checkbox is seleted the subs:[] in the initial state needs to be populated by the value from the checkbox. handleSubCatChange 方法检查子数组的元素是否已经在 selectedValues 中。

我有三个 console.logs ，如果我一个一个点击所有三个复选框，最后一个 console.log('0002') 显示 selectedValues 数组立即更新。

console.log('000')，在第一次点击和点击第二个复选框时显示空的 selectedValues 状态，记录第一个复选框值，即苹果，当点击第三个复选框时，第二个复选框值这是香蕉记录。第三个 console.log('0001') 更慢，只有在单击所有复选框后，它才会显示数组中第一个是苹果的复选框。我也尝试过使用 JSON.stringify，结果略有不同。 {JSON.stringify(selectedValues)}，实时更新，但 {JSON.stringify(values.subs)} 仅在点击所有三个复选框时显示前两个元素苹果和香蕉。

我的初始状态中有更多属性，但为简单起见，我只提到了标题和子项。复选框是表单元素的一部分，因此我需要实时更新 subs:[] 以便我可以使用其他值提交表单。我试过 useEffect 但没有运气。请帮忙。

import React,{useState} from 'react';

const initialState={ title:'glasses', subs:[],    }

const subarray=['apple','banana','orange']

const ProductCreate=()=>{

const [values,setValues]=useState(initialState); const[selectedValues,setSelectedValues]=useState([]);

useEffect(()=>{
    },[selectedValues])

const handleSubCatChange=(checkedName)=>{

if(selectedValues.includes(checkedName)){
    setSelectedValues(selectedValues.filter((c)=> c!=(checkedName)))
}
  else{ 
    setSelectedValues([...selectedValues,checkedName])
}
    setValues({...values,subs:selectedValues}) 
console.log('0000',selectedValues); console.log('0001',values.subs);}     
    )}
return( <>
 
{JSON.stringify(values.subs)}
{JSON.stringify(selectedValues)}


{subarray.map((s)=>
 <div key={index} >
  {console.log('0002',selectedValues)}
     <input type="checkbox" 
     value={s} 
     onChange={()=>handleSubCatChange(s)}
     />
 </div>
}
</>     )
}

Answer 1

如果您希望 values 状态与 selectedValues 状态同步，请正确使用 useEffect 钩子。

仅使用 handleSubCatChange 函数更改 selectedValues 的状态。

const handleSubCatChange = (checkedName) => {
    if (selectedValues.includes(checkedName)) {
      setSelectedValues(selectedValues.filter((c) => c !== checkedName));
    } else {
      setSelectedValues([...selectedValues, checkedName]);
    }
  };

并且只有当 useEffect 状态改变时，才使用 values 钩子改变 selectedValues 状态。

useEffect(() => {
    setValues({ ...values, subs: selectedValues });
    console.log("0000", selectedValues);
    console.log("0001", values.subs);
  }, [selectedValues]);

在 CodeSandbox 进行工作演示。

编辑：

在 selectedValues 初始化期间添加初始值。更改为：

const [selectedValues, setSelectedValues] = useState(['banana']);

将 checked 添加到输入以预选复选框。

checked={selectedValues.includes(s)}

仔细看演示。

无法使用 useState

1 个答案: