useState挂钩-状态丢失，即重置为初始值

Question

我试图在安装周期中初始化状态，然后在每次更新时对其进行处理。

然而，状态会以某种方式重置吗？我不明白为什么。

const [journalItems, setJournalItems] = useState([]);
useEffect(() => {
fetch(`http://localhost:4000/journals/${props.match.params.key}/items`)
.then(res => res.json())
.then(data => {
setJournalItems(data)    // Sets the state when the AJAX completes
})
.catch(err => err);
table.current = new Tabulator(refTable.current, {
rowClick: function (e, row) {
console.log("tabulator journalitems", journalItems) //  State is lost returns []
handleTableRowClick(row._row.data.id)
},
columns: [
{ title: "Компанија", field: "companyName" },
{ title: "Документ", field: "documentKey" },
],
});
}, []);
useEffect(() => {
console.log("useEffect journalItems", journalItems)    // Works fine
table.current.replaceData(journalItems)                // Uses the new state
}, [journalItems]);
function handleTableRowClick(journalItemId) {
console.log("handletablerowclick journalitems", journalItems) // State is lost, resets to []
}

控制台日志中的结果。。。

useEffect journalItems []
useEffect journalItems (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
tabulator journalitems []
handleTableRowClick journalitems []

Answer 1

我设法以一种奇怪的方式解决了这个问题，用useRef作为函数变量，并将函数定义移动到useEffect中？

const [journalItems, setJournalItems] = useState([]);
let handleTableRowClick = useRef(null);
useEffect(() => {
fetch(`http://localhost:4000/journals/${props.match.params.key}/items`)
.then(res => res.json())
.then(data => {
setJournalItems(data)    // Sets the state when the AJAX completes
})
.catch(err => err);
table.current = new Tabulator(refTable.current, {
rowClick: function (e, row) {
console.log("tabulator journalitems", journalItems) //  State is lost returns []
handleTableRowClick.current(row._row.data.id)
},
columns: [
{ title: "Компанија", field: "companyName" },
{ title: "Документ", field: "documentKey" },
],
});
}, []);
useEffect(() => {
console.log("useEffect journalItems", journalItems)    // Works fine
table.current.replaceData(journalItems)                // Uses the new state
handleTableRowClick.current = (journalItemId) => {
console.log("handletablerowclick journalItems", journalItems)
// Find the clicked row from all the rows
let journalItem = journalItems.filter(item => item.id === journalItemId)[0]
setFormJournalItems(journalItem)
}
}, [journalItems]);

Answer 2

我相信之所以会发生这种情况，是因为journalItems的初始值在为rowClick属性定义的函数内部被封闭。

因为包含table.current的效果只运行一次，所以table.current值将获得所有初始值，并且永远不会使用rowClick道具的新处理程序进行更新。

我怀疑您可能需要进行以下更改以使事情继续进行：

const [journalItems, setJournalItems] = useState([]);
useEffect(() => {
fetch(`http://localhost:4000/journals/${props.match.params.key}/items`)
.then(res => res.json())
.then(data => {
setJournalItems(data)    // Sets the state when the AJAX completes
})
.catch(err => err);
}, [props.match.params.key]);
// Re-create a new `table.current` value (including all handlers) when `journalItems` changes
table.current = useMemo(() => {
return new Tabulator(refTable.current, {
rowClick: function (e, row) {
console.log("tabulator journalitems", journalItems)
handleTableRowClick(row._row.data.id)
},
columns: [
{ title: "Компанија", field: "companyName" },
{ title: "Документ", field: "documentKey" },
],
});
}, [journalItems]);
useEffect(() => {
console.log("useEffect journalItems", journalItems) 
table.current.replaceData(journalItems)              
}, [journalItems]);
const handleTableRowClick = useCallback((journalItemId) => {
console.log("handletablerowclick journalitems", journalItems);
}, [journalItems]);

不要忘记更新第一个效果的依赖数组。在效果内部引用的外部作用域中的所有变量都必须在此数组中。