时间戳

首页 > 解决方案 > React Hooks - 即使对象为空，仍会调用 useEffect

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

问题描述

我有一个关于 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>

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

感谢您的帮助和时间

标签： javascriptreactjsreact-hooks

解决方案

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

推荐阅读