相关疑难解决方法(0)

让我解释一下此代码的结果，以便轻松地询问我的问题。

const ForExample = () => {
    const [name, setName] = useState('');
    const [username, setUsername] = useState('');

    useEffect(() => {
        console.log('effect');
        console.log({
            name,
            username
        });

        return () => {
            console.log('cleaned up');
            console.log({
                name,
                username
            });
        };
    }, [username]);

    const handleName = e => {
        const { value } = e.target;

        setName(value);
    };

    const handleUsername = e => {
        const { value } = e.target;

        setUsername(value);
    };

    return (
        <div>
            <div>
                <input value={name} onChange={handleName} />
                <input value={username} onChange={handleUsername} />
            </div>
            <div> …

AFAIK，在 React 函数组件中，必须使用useEffect如下componentWillUnmount功能：

useEffect(()=>{
  return console.log("component unmounting");
},[])

我正在制作一个表单页面，并希望在用户退出页面时提交进度。所以我正在考虑在清理过程中提交。

但是，如果我不将formData状态放入依赖项数组中，则状态将在清理过程中过时。
如果我确实formData将其放入依赖项数组中，则每次formData.

如何保持状态新鲜，但仅在“真正卸载”中运行清理？

const [formData, setFormData] = useState({
  input1: 'input1 default',
  input2: 'input2 default',
}); // track the form data


useEffect(()=>{
  return () => {
    axios.post(myFormSubmitURL, formData);
  }
}, []); // this will submit the stale data

useEffect(()=>{
  return () => {
    axios.post(myFormSubmitURL, formData);
  }
}, [formData]); // this will submit the data every time it changes