Javascript React Hooks-即使对象为空，仍将调用useEffect

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

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

然而，我感到困惑的是，为什么即使在加载卡组件时，

useffect（）

也会被触发，而

ratingObj

仍然是空的。是否仅当

比率bj

已满时才触发

---

感谢您的帮助，useEffect将至少致电一次。对象是否正在更新并不重要，因为当您编写 useffect（（）=>{ }，[ratingObj]）

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

import React，{useState，useMemo}来自'React'；
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>
}

常量应用=（）=>{
const[name，setName]=useState（“”）；
常量[modifiedName，setModifiedName]=useState（“”）；
常量更改=（事件）=>{
setName（event.target.value）；
}
常量handleSubmit=（）=>{
setModifiedName（名称）；
}
常量标题名=使用备注（（）=>{
console.log（'hola'）；
return`${modifiedName}是软件工程师`；
}，[modifiedName]）；
返回(
提交
);
};
导出默认应用程序；
常量标题=（{name}）=>{
返回{name}
}

我不确定自己是否理解正确，但是否希望仅在ratingObj已满时调用useEffect？在当前代码中，当CardsBoard呈现时，useEffect将触发，然后当ratingObj更改时，您发布的代码甚至不会运行，您不需要定义

ratingObj

或

setRatingObj

。并且

useffect

在挂载时将始终至少运行一次。@AndréKrosby是的，我希望只有在单击时才会调用useffect，即ratingObj将被填充。这可能吗？我不完全确定你的程序是如何工作的，但我想你可以在useEffect中添加一个if条件，比如

useEffect（（）=>{if（ratingObj）{doRatingClickProcessing（）}，[ratingObj]）

有没有办法让useEffect只在ratingObj满时运行，可能是其他钩子？尝试了UseMoom（（）=>{doRatingClickProcessing（）}，[ratingObj]），但我发现doRatingClickProcessing（）不是一个函数尝试在UseMoom（）之前实现doRatingClickProcessing（），因为arrow函数不支持提升。仍然没有运气。这可能是问题所在吗？这就是我如何声明ratingObj const[ratingObj，setRatingObj]=useState（{}）。这永远不会是空的，嗯？这可能是一个正确的答案，但是可以通过添加一个解释来改进答案，解释为什么它解决了问题。我的onClick是从子组件发生的，所以我不能这样做。我必须从子组件获取对象。我确实解决了我的问题。我在我的doRatingClickProcessing函数中设置了一个标志，只有ratingObj不是空的时候它才会运行。基本上，我正在检查播放器是否为空，这是有效的。我会给你答案的。

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>
}