问是否可以将useEffect放在if语句中？
EN

Stack Overflow用户

提问于 2021-02-03 00:46:25

回答 2查看 2.9K关注 0票数 2

伙计们，我一直在写我的着陆和仪表盘页面。

所以页面的工作流程是这样的:用户可以在登陆页面上选择插入表单位置，或者按一个按钮来接收所有位置。现在，在后端，我制作了两个API，一个用于获取所有位置，另一个用于将:location添加为req.body.param，然后根据该param筛选位置。邮递员一切都很好。

现在，由于我有两种用户获取位置的方法(所有位置或他想要的位置)，所以我想我在if语句中放置了两个useEffect，如下所示：

const filter = props.location.data;
if (filter) {
    useEffect(() => {
      const fetchFiltered = async () => {
        const res = await ArticleService.filterByName(filter);
        setContent(res.data);
      };

      fetchFiltered();
    }, []);
  } else {
    useEffect(() => {
      const fetchPosts = async () => {
        const res = await ArticleService.articles();
        setContent(res.data);
      };

      fetchPosts();
    }, []);
  }

因此，我的逻辑是，如果props.location中有props.location，请执行useEffect，它从ArticleService获取数据，然后ArticleService在api url中发送过滤器。如果没有filter，只需检索我所有的数据，并将setContent检索到res.data。

但是，当我编译代码时，错误是：React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render

用我的逻辑做这件事有什么方法吗?或者我需要创建两个组件:一个是普通的仪表板，另一个是过滤的结果？

用户发送位置的Landing.js

<Form>
   <div className='form-group'>
      <Input
       type='text'
       className='form-control text-center'
       name='name'
       placeholder='Enter desired location'
       value={location}
       onChange={onChangeLocation}
       />
      <Link to={{ pathname: '/dashboard', data: location }}>
         <i className='fas fa-check'></i>
      </Link>
   </div>

    <p className='text-center'>or</p>
    <Link className='btn btn-primary btn-block' to='/dashboard'>
       Show all locations
    </Link> 
</Form>

Dashboard.js

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

import Pagination from 'react-js-pagination';

import ArticleService from '../../services/article.service';

const Dashboard = (props) => {
  const [content, setContent] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(10);

  const filter = props.location.data;

  if (filter) {
    useEffect(() => {
      const fetchFiltered = async () => {
        const res = await ArticleService.filterByName(filter);
        setContent(res.data);
      };

      fetchFiltered();
    }, []);
  } else {
    useEffect(() => {
      const fetchPosts = async () => {
        const res = await ArticleService.articles();
        setContent(res.data);
      };

      fetchPosts();
    }, []);
  }

  let counter = content.length;

  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = content.slice(indexOfFirstPost, indexOfLastPost);

  // Change page
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  const render = (item, index) => {
    return (
      <tr key={index}>
        <td className='text-center'>
          <div key={item.id}>
            <img
              src={`${item.pictures}`}
              alt='slika artikla'
              className='rounded'
            ></img>
          </div>
        </td>
        <td className='text-center'>
          <div key={item.id}>
            <h4>{item.descr}</h4>
            <br></br>
            <h6 className='text-left'>Number of m2: {item.sqm}m2</h6>
            <div className='text-left'>
              <small className='text-left'>
                {' '}
                <a href={item.link} target='_blank' rel='noopener noreferrer'>
                  Show on website
                </a>
              </small>
            </div>
          </div>
        </td>
        <td className='text-center'>
          <div key={item.id}>
            <h4>{item.price}</h4>
            <small className='text-left'>Price per m2: {item.ppm2}</small>
          </div>
        </td>
        <td className='text-center'>
          <div key={item.id}>
            <Link to={`/article/${item.id}`}>
              <h4>Show</h4>
            </Link>
          </div>
        </td>
      </tr>
    );
  };

  return (
    <div>
      <div className='container'>
        <h4 className='text-center'>
          Number {counter}
        </h4>
        <div className='table-responsive'>
          <table className='table'>
            <thead className='thead-dark'>
              <tr>
                <th className='text-center' scope='col'>
                  Pic
                </th>
                <th className='text-center' scope='col'>
                  Description
                </th>
                <th className='text-center w-25' scope='col'>
                  Price
                </th>
                <th className='text-center' scope='col'>
                  Show offer
                </th>
              </tr>
            </thead>
            <tbody>{currentPosts.map(render)}</tbody>
          </table>
        </div>
      </div>
      <nav>
        <div className='w3-bar w3-xlarge'>
          <ul className='pagination justify-content-center'>
            <li className='page-item'>
              <Pagination
                hideDisabled
                hideNavigation
                hideFirstLastPages
                currentPage={currentPage}
                itemsCountPerPage={10}
                totalItemsCount={content.length}
                pageRangeDisplayed={indexOfLastPost}
                onChange={handlePageChange}
              />
            </li>
          </ul>
        </div>
      </nav>
    </div>
  );
};

export default Dashboard;

谢谢！:D

javascript

reactjs

use-effect

数字工厂场景解决方案

帮助企业实现数字化、智能化，解决企业工厂内设备数据采集、设备指标分析、企业信息系统间数据孤岛打通、数据应用困难的问题

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-03 00:50:13

基本答案，不，您不能有条件地调用useEffect。您必须将条件逻辑放在useEffect回调中。

const filter = props.location.data
useEffect(() => {
  if (filter) {
    const fetchFiltered = async () => {
      const res = await ArticleService.filterByName(filter)
      setContent(res.data)
    }

    fetchFiltered()
  } else {
    const fetchPosts = async () => {
      const res = await ArticleService.articles()
      setContent(res.data)
    }

    fetchPosts()
  }
}, [filter, setContent, ArticleService.filterByName, ArticleService.articles])

React中的钩子并不真正遵循javascript的标准规则。实现它们的方式有一些性能方面的原因，通常在每次执行呈现传递时都会执行一些缓存来阻止多余的代码被执行。

useEffect钩子只在呈现过程中运行其回调函数，其中依赖数组中的一个值(useEffect的第二个arg )已经更改。将所有可能改变的外部值放入其中是标准的。因此，当筛选器的值发生变化时，应用程序将重新复制，useEffect将进行比较，意识到某些内容发生了变化，并再次运行它的回调，然后执行if语句。

您可以在文档的性能部分中阅读更多有关这方面的内容。

票数 4