预期的赋值或函数调用：no-unused-expressions ReactJS 功能组件

Question

这是我的第一个 React 应用程序，我不明白 wrong.I 试图显示页面的内容，但我在标题中收到两次错误（在第 26:5 行 - fetch(url, { 和 39:9 我有行 setisLoaded(true), setArticles(result.articles);) 的地方。我将代码从 App class 组件到功能组件来回更改，但没有运气（虽然获取数据 works/worked)。我尝试将 useEffect() 方法中的所有代码封装到 return 语句中，结果出现了各种我无法解决的解析错误 fix.So 这是代码:

import React, { Fragment, useState, useEffect } from 'react';
    import Title from './components/Title/Title';
    import Content from './components/Content/Content';
    import 'bootstrap/dist/css/bootstrap.min.css';
    import { Card, Navbar, Form, FormControl, Button } from 'react-bootstrap';
    
    const App = (props) => {
      const [error, setError] = useState(null);
      const [isLoaded, setisLoaded] = useState(false);
      const [articles, setArticles] = useState([]);
      const [country, setCountry] = useState('gb');
    
      const handleSubmit = (event) => {
        event.preventDefault();
        changeCountryHandler();
      };
    
      const changeCountryHandler = (event) => {
        setCountry(event.target.value);
      };
    
      useEffect(() => {
        let url =
          'https://cors-anywhere.herokuapp.com/http://newsapi.org/v2/top-headlines?country='
+
          country;
        fetch(url, {
          method: 'GET',
          headers: {
            Accept: 'application/json, text/plain, */*',
            'Content-type': 'application/json',
            'x-api-key': 'myApiKey',
            SameSite: 'None',
          
          },
        })
          .then((res) => res.json())
    
          .then((result) => {
            setisLoaded(true), setArticles(result.articles);
          }),
          (error) => {
            setisLoaded(true);
            setError(error);
          };
      });
    
      if (error) {
        return <div>Error: {error.message}</div>;
      } else if (!isLoaded) {
        return <div>Loading...</div>;
      } else {
        return (
          <>
            <Navbar className="bg-secondary justify-content-between" variant="dark">
              <p>The selected country is:{country}</p>
              <Form inline onSubmit={handleSubmit}>
                <FormControl
                  type="text"
                  placeholder="Search by country"
                  className=" mr-sm-2"
                  onChange={changeCountryHandler}
                  value={country}
                />
                <Button type="submit">Submit</Button>
              </Form>
            </Navbar>
            {articles.map((article) => (
              <Card
                style={{ width: '100%', height: 'auto' }}
                key={article.title}
                className="mb-5 mt-4 bg-light"
              >
                <Card.Img
                  variant="top"
                  src={article.urlToImage}
                  className="pr-3 pl-3"
                  alt=""
                />
    
                <Card.Body>
                  <Card.Title>
                    {article.author} | {article.publishedAt}
                    <Title title={article.title}>{article.title}</Title>
                  </Card.Title>
                  Description: {article.description}
                  <Content content={article.content}>{article.content}</Content>
                  Read the full article on{' '}
                  <Card.Link
                    href={article.url}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {article.url}
                  </Card.Link>
                </Card.Body>
              </Card>
            ))}
          </>
        );
      }
    };
    
    export default App;

最初我希望能够更改 URL 中的国家/地区参数，以便根据从表单提交的内容从 API 中获取所需的内容（我知道我应该有一个带有选项而不是输入类型文本的 select，但我现在只是测试它）。但在这一点上，如果我能够显示任何页面，我很高兴，因为对此问题的其他回应（向 useEffect() 箭头函数添加 return，将语句括在括号内而不是花括号内）对我不起作用，我不明白这个 error.Any 想法会不胜感激。

Answer 1

其中一个错误是：

setisLoaded(true), setArticles(result.articles);

语句由分号分隔，而不是逗号，因此解决方法是：

setisLoaded(true);
setArticles(result.articles);

一个错误是放错了括号，这导致错误回调是一个单独的表达式：

}), // <-----
(error) => {
  setisLoaded(true);
  setError(error);
};

应该改为：

}, (error) => {
  setisLoaded(true);
  setError(error);
}); // <----- moved to here

Answer 2

您在 useEffect 中缺少依赖项数组。

useEffect(() => {
   //your code
}, []);

如果您添加一个空数组，它只会在您的组件挂载时获取一次数据。如果您在数组中添加任何 prop 或 state，它将在组件安装时以及添加的 prop 或 state 更改时获取。

永远记住将数组添加为 useEffect 的第二个参数以避免无限循环。

预期的赋值或函数调用：no-unused-expressions ReactJS 功能组件

expected assignment or function call: no-unused-expressions ReactJS functional component

javascript

reactjs

use-effect