为什么我的反应挂钩没有被调用？

Question

这段代码按预期工作，但现在没有调用反应挂钩。

import { store } from "./home.store";

const Home = () => {
 const [state, setState] = useState({});

 console.log('###store', store)

 useEffect(() => {
   console.log('USE EFFECT CALLED')
   console.log('state 1', store.getState());
   setState(store.getState());
 }, []);

 console.log("state 2", state);

 console.log('state 3', store.getState());
 setState(store.getState());
 console.log("state 4", state);

return (...)

在 useEffect 函数中，'USE EFFECT CALLED' 永远不会记录到控制台。状态 1 从未被记录。

状态 2 显示一个空对象。状态 3 正确记录来自 redux 存储的对象。状态 4 显示一个空对象。

useEffect 和 useState 似乎不起作用。他们以前工作过。

Answer 1

查看您的代码https://codesandbox.io/s/distracted-framework-g4eoy?file=/src/components/home/home.component.jsx

你不需要使用react useState。您已经在通过 redux 存储状态。所以使用 redux 中的状态：

尝试更换

const [state, setState] = useState({});

有

const state = store.getState();

Answer 2

您的应用崩溃了。修复它，我可以看到 useEffect 被调用

import React, { useEffect } from "react";
import { useState } from "react";
import "./home.css";
import { store } from "./home.store";

const Home = () => {
  const [state, setState] = useState({});

  console.log('###store', store)

  useEffect(() => {
    console.log('USE EFFECT CALLED')
    console.log('state 1', store.getState());
    setState(store.getState());
  }, []);

  console.log("state 2", state);

  console.log('state 3', store.getState());
  // setState(store.getState());
  console.log("state 4", state);

  return (
    <div className="container-fluid">
      <section id="section-banner">
        <div className="row">
          <div
            className="col d-sm-flex justify-content-md-end align-items-md-start p-0"
            id="banner-column"
          >
            <img
              className="img-fluid d-none d-lg-block"
              src={state?.banner?.images[0]}
            />
            <img className="img-fluid d-lg-none" src={state?.banner?.images[1]} />
            <div className="text-center mt-4 mt-md-0" id="banner-text">
              <h6>{state?.banner?.texts[0]}</h6>
              <h1 className="mb-0">{state?.banner?.texts[1]}</h1>
              <h1 className="mb-0">{state?.banner?.texts[2]}</h1>
              <h1>{state?.banner?.texts[3]}</h1>
              <p className="mt-4">{state?.banner?.texts[4]}</p>
              <div className="d-flex justify-content-around mt-4">
                <h6 className="mb-1 d-inline-block">
                  <a href="#" style={{ fontSize: "13px" }}>
                    <strong>{state?.banner?.texts[5]}</strong>
                    <br />
                  </a>
                </h6>
                <h6 className="mb-1 d-inline-block">
                  <a href="#" style={{ fontSize: "13px" }}>
                    <strong>{state?.banner?.texts[6]}S</strong>
                    <br />
                  </a>
                </h6>
              </div>
              <div className="d-flex justify-content-around mt-4">
                <h6 className="mb-1 d-inline-block">
                  <a className="fw-bold" href="#" style={{ fontSize: "13px" }}>
                    {state?.banner?.texts[7]}
                  </a>
                </h6>
                <h6 className="mb-1 d-inline-block">
                  <a className="fw-bold" href="#" style={{ fontSize: "13px" }}>
                    {state?.banner?.texts[8]}
                    <br />
                  </a>
                </h6>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="section-2" className="mt-5 px-md-4">
        <div className="row">
          {state.section2?.map((section) => (
            <>
              <div className={section.class}>
                <img className="img-fluid" src={section.img} />
              </div>
              <div className={section.textData?.class}>
                <h4>Your Holiday Gift Guide</h4>
                <p>
                  Gifts for everyone on your list (including you).
                  <br />
                </p>
                <div className="d-flex mt-2 flex-column flex-lg-row w-100 justify-content-lg-around">
                  <h6 className="mb-1 d-block d-lg-inline-block">
                    <a href="#" style={{ fontSize: "12px" }}>
                      <strong>BEST SELLERS</strong>
                      <br />
                    </a>
                  </h6>
                  <h6 className="mb-1 d-block d-lg-inline-block">
                    <a href="#" style={{ fontSize: "12px" }}>
                      <strong>SHOP THE GIFT GUIDE</strong>
                      <br />
                    </a>
                  </h6>
                </div>
              </div>

            </>
          ))}
        </div>
      </section>
      
    </div>
  );
};

export default Home;

为什么我的反应挂钩没有被调用？

Why are my react hooks not getting called?

reactjs

redux