当参数更改时，useEffect 不会重新运行

Question

我的导航栏上有 6 个链接(家庭、世界、政治、商业、技术、体育(，我只希望"部分"参数是这些值之一。如果输入"部分"的其他值，将显示"找不到页面"消息。

所有 6 个链接都正常工作。当单击导航栏上的另一个链接时，useEffect 将重新运行。但是，如果我输入无效的部分参数，它首先显示"找不到页面"消息， 然后我单击导航栏上的链接，useEffect 不会重新运行并且应用程序崩溃。

我无法弄清楚为什么useEffect没有重新运行，我确实指定了props.match.params.section作为其依赖项。

const Headlines = (props) => {
useEffect(() => {
console.log(props.match.params.section);
props.getArticles(props.match.params.section === 'sports' ? 'sport' : props.match.params.section);
}, [props.match.params.section]);
if (props.match.params.section !== undefined &&
props.match.params.section !== 'world' &&
props.match.params.section !== 'politics' &&
props.match.params.section !== 'business' &&
props.match.params.section !== 'technology' &&
props.match.params.section !== 'sports') {
return (
<Container fluid>
<h1>The page cannot be found</h1>
</Container>
);
}
return (
props.news.loading ?
<Spinner/>
:
<Container fluid className={classes.headlines}>
{props.news.articles.map((article) => {
return <HeadlineItem key={article.id} article={article}/>
})}
</Container>
)
};

导航栏的代码：

<Nav className="mr-auto">
<NavLink to="/"
exact
className={classes.link}
activeClassName={classes.selected}>Home</NavLink>
<NavLink to="/world"
className={classes.link}
activeClassName={classes.selected}>World</NavLink>
<NavLink to="/politics"
className={classes.link}
activeClassName={classes.selected}>Politics</NavLink>
<NavLink to="business"
className={classes.link}
activeClassName={classes.selected}>Business</NavLink>
<NavLink to="/technology"
className={classes.link}
activeClassName={classes.selected}>Technology</NavLink>
<NavLink to="/sports"
className={classes.link}
activeClassName={classes.selected}>Sports</NavLink>
</Nav>

应用程序的代码.js：

function App() {
return (
<Provider store={store}>
<Router>
<NavigationBar/>
<Switch>
<Route exact path="/:section?" component={Headlines}/>
</Switch>
</Router>
</Provider>
);
}

Answer 1

我已经根据您的片段创建了一个简单的工作版本，请查看下面的代码沙箱：

一个简单的工作版本

我做了什么？基本上，从您的片段中，eslint 警告了我这条消息：

React Hook useEffect has a missing dependency: 'props'. 
Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, 
so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect. (react-hooks/exhaustive-deps)

您应该首先在useEffect外部解构section参数，如下所示：

const [articles, setArticles] = useState([]);
const { section } = props.match.params;
useEffect(() => {
console.log(section);
setArticles([`${section} 1`, `${section} 2`]);
}, [section]);
if (
section !== undefined &&
section !== "world" &&
section !== "politics" &&
section !== "business" &&
section !== "technology" &&
section !== "sports"
) {
return <span>The page cannot be found</span>;
}

Answer 2

import { hasIn } from "lodash";
const Headlines = (props) => {
const [state, setState] = React.useState({ status: "loading", data: [], currentSection: "" });
const filterList = ["world", "politics", "business", "technology", "sports"];
useEffect(() => {
if (hasIn(props, "match.params.section") &&
filterList.indexOf(props.match.params.section) > -1 &&
currentSection !== props.match.params.section
) {

props.getArticles(props.match.params.section).then((result) => {
if (result.length > 0) {
setState({ status: "found", data: result, currentSection: props.match.params.section });
} else {
setState({ status: "notfound", data: [], currentSection: "" });
}
}).catch((error) => {
console.log(error);
setState("notfound")
})
} else {
setState("notfound")
}
}, [props]);
switch (state.status) {
case "notfound":
return (
<Container fluid>
<h1>The page cannot be found</h1>
</Container>
);
case "found":
return <Container fluid className={classes.headlines}>
{data.map((article) => {
return <HeadlineItem key={article.id} article={article} />
})}
</Container>
default:
return <Spinner />
}
};

Answer 3

代码看起来不错。我认为虽然给出无效的部分参数 props.getArticles(( 正在破坏它似乎.这就是为什么它正在打破.如果您正在进行 http 调用，请添加尝试捕获并检查。

props.getArticles(props.match.params.section === 'sports' ? 'sport' : props.match.params.section);