React Hooks - 即使对象为空，useEffect 仍会被调用

Question

我有一个关于 React Hooks 的问题。 这是我的代码示例：-

import React, { useState, useEffect } from "react";
import Card from "./Card";

const CardsBoard = () => {

  useEffect(() => {
    doRatingClickProcessing()
  }, [ratingObj])

  const doRatingClickProcessing = () => {
    const { player, title, rating } = ratingObj
  }

  return (
    <div className="container-fluid justify-content-center">
        <div className="row">
          <div className="col-md-6">
            <Card
              cardInfo={player1Card}
              player={1}
              showCard={visiblePl1}
              clickableRatings = {clickableRatings}
              onClick={ratingObj => setRatingObj(ratingObj)}
            />
          </div>
          <div className="col-md-6">
            <Card
              cardInfo={player2Card}
              player={2}
              showCard={visiblePl2}
              clickableRatings = {clickableRatings}
              onClick={ratingObj => setRatingObj(ratingObj)}
            />
          </div>
        </div>
      )}
    </div>
  )
}

export default CardsBoard

然后在卡片组件中，当用户点击评级时，我成功返回ratingObj 。

在卡片组件中，我有这样的东西：-

          <div
            className="col-md-2 text-left card-rating-color"
            onClick={() =>
              onClick({
                player: player,
                title: row[0].title,
                rating: row[0].rating,
              })
            }
          >
            {row[0].rating}
          </div>

但是我很困惑为什么即使加载了 Card 组件也会触发useEffect()并且ratingObj仍然为空。 难道不应该只在ratingObj被填满时才触发吗？

感谢您的帮助和时间

Answer 1

useEffect 将至少调用一次。 您的对象是否正在更新都没有关系，因为当您编写 useEffect(()=>{ },[ratingObj]);

在上面的代码中，您将对象传递到方括号中。 这意味着您将依赖项作为第二个参数提及，而参数列表中的空 [] 将至少调用一次。 之后，它取决于您传入的 ratingObj 。

Answer 2

import React, {useState,useMemo} from 'react';
const App = () => {
  const [name, setName] = useState('');
  const [modifiedName, setModifiedName] = useState('');
  const handleOnChange = (event) => {
    setName(event.target.value);
  }
  const handleSubmit = () => {
    setModifiedName(name);
  }
  const titleName = useMemo(()=>{
    console.log('hola');
    return `${modifiedName} is a Software Engineer`;
  },[modifiedName]);
  return (
    <div>
        <input type="text" value={name} onChange={handleOnChange} />
        <button type="button" onClick={handleSubmit}>Submit</button>
        <Title name={titleName} />
    </div>
  );
};
export default App;

const Title = ({name}) => {
  return <h1>{name}</h1>
}