Question

我的导航栏上有6个链接（家庭，世界，政治，商业，技术，体育），我只希望“ section”参数成为这些值之一。如果输入“ section”的其他值，则会显示“找不到页面”消息。

所有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>

App.js的代码：

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

Answer 1

use Illuminate\Support\Facades\Notification;

Answer 2

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

A simple working version

我做了什么？基本上，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)

首先应该像这样在section外部破坏useEffect参数：

 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 3

代码看起来不错。我认为虽然给无效的部分参数props.getArticles（）似乎正在中断，这就是它正在中断的原因。如果要进行http调用，请添加try catch和check。

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

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

3 个答案: