为什么我的变量在保存到文件后似乎正在使用新数据进行更新？ React 和 NWJS

Question

我正在使用 React 和 NWJS 开发一个笔记应用程序，其中笔记保存到单独的文件 (save.json)。应用程序使用 useEffect 挂钩从此文件中获取初始数据，使用 handleChange 处理输入更改，并使用 saveFile 将数据保存到文件中。

我面临的问题是，当我单击“保存”按钮时，它只保存初始的空数组，而不保存包含新注释的更新后的 fullData。但是，在初次保存后，后续点击会正确保存更新的数据。

const [fullData, setFullData] = useState([]);

// Fetch initial data from file
useEffect(() => {
const fetchData = async () => {
    try {
    const data = await fs.promises.readFile('./save.json', 'utf8');
    const jsonData = JSON.parse(data);
    setFullData(jsonData);
    } catch (err) {
    console.error(err);
    }
};
fetchData();
}, []);

const handleChange = (e) => {
e.preventDefault();
setNoteData(prevData => ({ ...prevData, [e.target.name]: e.target.value }));
console.log(noteData);
};

const [noteData, setNoteData] = useState({
id: Date.now(),
name: '',
note: '',
category: ''
});

const saveFile = async () => {
try {
    const stringData = JSON.stringify(fullData);
    await fs.promises.writeFile('./save.json', stringData);
    console.log('Saved data:', fullData);
} catch (err) {
    console.error(err);
}
};

我尝试将一些功能移至

app.js

组件中，认为这将有助于数据传输，因为从文件中获取的初始

useEffect

位于

app.js

上。我尝试对

saveFile

函数使用超时，以确保

fullData

在

saveFile

运行之前已更新

Answer 1

看来你的代码现在有一个逻辑问题。例如，当你在handleChange中更新noteData时，你需要将更新后的noteData添加到fullData中，这样你就可以保存更新后的包含新笔记的fullData。

我像这样更新了你的代码：

const [fullData, setFullData] = useState([]);

const [noteData, setNoteData] = useState({
    id: Date.now(),
    name: '',
    note: '',
    category: ''
});

const handleChange = (e) => {
    e.preventDefault();
    setNoteData(prevData => ({ ...prevData, [e.target.name]: e.target.value }));
    console.log(noteData);
};

const saveFile = async () => {
    try {
        const stringData = JSON.stringify(fullData);
        await fs.promises.writeFile('./save.json', stringData);
        console.log('Saved data:', fullData);
    } catch (err) {
        console.error(err);
    }
};

// Add updated noteData into fullData
useEffect(() => {
    setFullData(prevData => [...prevData, noteData]);
}, [noteData]);


// Fetch initial data from file
useEffect(() => {
    const fetchData = async () => {
        try {
            const data = await fs.promises.readFile('./save.json', 'utf8');
            const jsonData = JSON.parse(data);
            setFullData(jsonData);
        } catch (err) {
            console.error(err);
        }
    };
    fetchData();
}, []);