UseEffect初始状态加载

Question

有人可以解释为什么 console.log(foodList) return 是空数组而不是过滤数组吗？我正在做分页逻辑，我需要先过滤数组然后显示它。然而，这就像副作用一样，应该只执行一次，因为还有一些其他的事情会触发组件重新执行，所以这必须在 useEffect 中。伪代码只是此函数之上的数据，您不必为它操心。

函数 1

    const correctFunction = () => {
      const pages = Math.ceil(DUMMY_FOOD.length / 5);
    
      const arr = [];
      let helpArr = [];
    
      let c = 0;
    
      for (let i = 0; i < pages; i++) {
        for (let j = c; j < c + 5; j++) {
          helpArr.push(DUMMY_FOOD[j]);
        }
        c += 5;
        arr.push(helpArr);
        helpArr = [];
      }
    
      DUMMY_FOOD = arr;
      return DUMMY_FOOD;
    };

组件

const MenuList = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const params = useParams();
  const [page, setPage] = useState(2);
  let foodList = [];

  console.log(DUMMY_FOOD);
  useEffect(() => {
    foodList = correctFunction();
  }, []);

  console.log(foodList);
  ect...

谢谢。

Answer 1

效果挂钩运行在渲染函数完成后。如果要呈现效果的结果，请使用状态。将其设置在效果中以触发 re-render.

如果你想做一次昂贵的操作，然后使用 useMemo。

const foodList = useMemo(correctFunction, []);

UseEffect初始状态加载

UseEffect initial state loading

reactjs

react-hooks

use-effect