组件接收新道具，但在使用 mapStateToProps 时，其中的引用不会更新

Question

所以我试图访问一个通常应该更新的道具 我可以使用我的 redux devTools 查看商店，并且可以确认它已更新。 但是当我在我的组件中的一个函数内时，由于某种原因，props 似乎保持了它的初始值

const mapStateToProps = ({ repos, page }) => ({  
repos,
page // page is 1 then gets updated in the store to 2 
});
const mapDispatchToProps = dispatch => {
return {
getData: (page, dateString) => dispatch(getData(page, dateString))
};
};
const ConnectedRepositoryList = ({
alertOnBottom,
page, // after updated in the store the component re-renders and page is 2
getData,
repos
}) => {
const loadRepos = () => {
const date = new Date();
date.setDate(date.getDate() - 30);
const dateString = date.toISOString().split("T")[0];
getData(page, dateString); // here page is still 1  :(
};
useEffect(() => {
loadRepos();
}, []);
const handleOnDocumentBottom = useCallback(() => {
console.log("I am at bottom! ");
loadRepos();
if (alertOnBottom) {
alert('Bottom hit! Too slow? Reduce "debounce" value in props');
}
}, [alertOnBottom]);
return (
my html
);
}

Answer 1

您的handleOnDocumentBottom回调取决于loadRepos但您尚未在依赖项数组中包含loadRepos，因此handleOnDocumentBottom正在被记住并保留其原始值，除非alertOnBottom更改。由于您要在每个渲染上重新声明loadRepos，因此handleOnDocument回调将引用page1时在第一个渲染上定义的loadRepos。您可以handleOnDocumentBottom将loadRepos添加到依赖项数组中，但这违背了useCallback的目的，因为loadRepos是每个渲染的新引用，无论如何都会在每个渲染上创建handleOnDocumentBottom。

以下是保留记忆但更正行为的两个选项：

选项 1 - 将page添加到依赖项数组。每当page发生变化时，正确的loadRepos引用都会在handleOnDocumentBottom中关闭，但遵循逻辑并意识到page是loadRepos的隐式依赖关系有点棘手。此外，如果loadRepos最终依赖于将来的另一个值，则需要更新handleOnDocumentBottom依赖项数组以避免细微的错误：

const handleOnDocumentBottom = useCallback(() => {
console.log("I am at bottom! ");
loadRepos();
if (alertOnBottom) {
alert('Bottom hit! Too slow? Reduce "debounce" value in props');
}
}, [alertOnBottom, page]); // refresh `handleOnDocumentBottom` whenever page changes

选项 2 是将loadRepos也设置为回调，然后将其添加到依赖项数组中以handleOnDocumentBottom：

const loadRepos = useCallback(() => {
const date = new Date();
date.setDate(date.getDate() - 30);
const dateString = date.toISOString().split("T")[0];
getData(page, dateString); // here page is still 1  :(
}, [page]); // add page as a dependency here
useEffect(() => {
loadRepos();
}, []);
const handleOnDocumentBottom = useCallback(() => {
console.log("I am at bottom! ");
loadRepos();
if (alertOnBottom) {
alert('Bottom hit! Too slow? Reduce "debounce" value in props');
}
}, [alertOnBottom, loadRepos]); // add the memoized loadRepos here

现在，如果loadRepos获得任何新的依赖项或更改，则handleOnDocumentBottom不需要更改，并且依赖项关系是显式的。