重新加载页面后状态丢失

Question

我的 useEffect 钩子有问题。当我手动重新加载/刷新页面时，它给我 Warning: Can't perform a React state update on an unmounted component. 错误消息。我有两件事可以解决这个问题，即在 useEffect 钩子的第二个参数中添加依赖项并添加清理函数。但是，两者都没有像我想象的那样工作。有人可以帮我解决这个问题吗？

const Demoinventory = () => {

const [bacsData, setBacsData] = useState([])
const [bacsHistoryLocation, setBacsHistoryLocation] = useState([])


useEffect(() => {
        const getLastHistoryBacs = async () => {
            try {
                const response = await fetch(`/bacslist/demohistory-all`)
                    const parseResponse = await response.json()
                    setBacsHistoryLocation(parseResponse)
            } catch (err) {
                console.error(err.message)
            }
        }
        getLastHistoryBacs()
    }, [])

    const getTheLocation = (idx) => {
        console.log(idx)
        console.log(bacsHistoryLocation)
        const location = bacsHistoryLocation.filter(
            bacs => bacs.serial_number === idx
        )
        console.log(location[0])
        return (
            <p key={idx}>{location[0].bacs_location}</p>  <--- This one is not working when refresh the page      
            // <p>Texas</p>               <--- This one is working perfectly fine                              
        )
    }

    const renderBacs = () => {
        return (
            bacsData.map((bacs) => 
            (
                <TableRow key={bacs.serial_number}>
                        <TableCell>{bacs.bacs_unit}</TableCell>
                        <TableCell>{bacs.serial_number}</TableCell>
                        {/* <TableCell>{bacs.bacs_location}</TableCell> */}
                        <TableCell>{getTheLocation(bacs.serial_number)}</TableCell>
                        <TableCell>{bacs.ctime.substring(0, 10)}</TableCell>
                </TableRow>   
            ))
        )
    }

return (
<Table aria-label="simple table">
         <TableHead>
                <TableRow>
                     <TableCell><b>BACS Unit</b></TableCell>
                     <TableCell><b>Serial Number</b></TableCell>
                     <TableCell><b>Current Location</b></TableCell>
                     <TableCell><b>Date Created</b></TableCell>
                     <TableCell></TableCell>
                     <TableCell></TableCell>
                </TableRow>
        </TableHead>
        <TableBody>
             {renderBacs()}
        </TableBody>
</Table>
)
}