React useState Hook：在 useEffect 之前状态不更新

Question

我在组件中遇到了 React useState 钩子和 useEffect 钩子的问题。当我使用 setData 更新状态时，在再次调用 useEffect 挂钩之前状态似乎没有更新。

我有一个组件，我从 API 获取数据并使用 useState 挂钩更新组件状态。这是我正在使用的原始代码：

const Approval = () => {
 const [data, setData] = useState([]);

 useEffect(() => {
    fetchApproval();
 },[])

 const fetchApproval = async () => {
    try {
        const res = await ApiService.getApproval(
            API_ENDPOINTS.GET_APPROVAL_LIST,
            tokenId
        );

        if(response?.status === 200){
            const filteredRes = response,approvalList.filter(res=> res.message.includes(Approval_list_key))
            setData(filteredRes)
        }
    }catch (error){
        console.log(error)
    }
 }

 const handleApproval = async (id) => {
  console.log(id) - this ID I am getting value
    try {
        const updatedData = data.map(item => {
            if (item.id === id) {
                return { ...item, Status: "Approved" };
            }
            return item;
        });
        setData(updatedData);
        console.log("DATA BEFORE API CALL", data) //this is coming as empty
        // Make PUT request to update the data
        await ApiService.updateApprovalById(
            API_ENDPOINTS.UPDATE_APPROVALBY_ID,
            tokenId,
            updatedData.find(item => item.id === id)
        );
      console.log("DATA BEFORE API CALL", data) //this is also coming as empty
    } catch (error) {
        console.error("Error approving:", error);
    }
};

问题： 当我在handleApproval函数内调用setData后尝试立即访问更新的状态（数据）时，就会出现问题。当我记录它时，updatedData 似乎是空的或未定义，即使我在调用 API 之前使用 setData 更新状态。

任何有关解决此问题的见解或建议将不胜感激。谢谢！

Answer 1

我认为它不起作用，因为你的 useState 中有一个数组，这是一个引用数据类型。试试这个：

setData([...filteredRes])