标签: use-effect

我想在本机反应中删除事件侦听器，但在反应本机中不推荐使用removeEventListener

在这里学习React，我只是想展示一个lottie动画。看起来相当简单，但我在使用 useEffect 挂钩时遇到了一些问题。我使用钩子在页面加载时渲染动画，但它不断重复（有时两次或更多次）。我知道这是因为 useEffect 会多次触发，但我不知道如何处理这个问题。我只想在页面上显示一个动画。我怎样才能实现这个目标？

import React, { useEffect, useRef } from "react";
import "./index.scss";
import lottie from "lottie-web";

const Hero = () => {
  const lottieContainer = useRef(null);

  useEffect(() => {
    lottie.loadAnimation({
      container: lottieContainer.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: require("../../assets/Lottie/developer.json"),
    });
  }, []);


  return (
    <div className="hero">
      <div ref={lottieContainer}></div>
    </div>
  );
};

export default Hero;

我想在每次加载页面时随机化一个数组。我正在使用 Nextjs，第一个问题是客户端和服务器不匹配，所以有人建议我需要将随机代码放入 useEffect 挂钩中，但我显然做错了。 ..我需要一些帮助来了解如何修复我的代码。

export default function IndexPage() {\n  useEffect(()=>{\n    let randomizeArray = [...array].sort(() => 0.5 - Math.random());\n\n    let selectedRandomArray = randomizeArray.slice(0, 3);\n  },[])\n\n  return (\n    <div>\n      {selectedRandomArray.map((s, id) => (\n        <div key={id}>\n          <h2>{s.name}</h2>\n        </div>\n      ))}\n    </div>\n  );\n}\n

这是 Codesandbox 中没有 useEffect 的示例。它有效，但我\xc2\xb4m在控制台中得到不匹配的客户端/服务器\n https://codesandbox.io/s/shuffle-array-and-return-random-values-in-nextjs-veqy3w?file=/pages/索引.js

实际上并不理解为什么此代码部分不能正常工作。该useEffect块在每个滚动位置上重新渲染。另外，我看到这段代码部分：console.log(wrapperRef.current.style.opacity);应该调用 if 和 else if 语句，但事实并非如此。

这是代码：

  useEffect(() => {
    console.log(wrapperRef.current.style.opacity);
    if (wrapperRef.current.style.opacity === 0) {
      setIsHidden(true);
      console.log("true");
    } else if (wrapperRef.current.style.opacity === 1) {
      setIsHidden(false);
      console.log("false");
    }
  }, [position]);

我正在尝试App.js从后端将数据加载到我的文件中进行反应。我使用 redux 构建了从后端到前端的整个数据获取和存储管道。这是代码：

function App() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPosts());
  }, [dispatch]);
  const posts = useSelector((state) => state.posts);
  console.log(posts);
  return (
    <div>
      <h1>App</h1>
    </div>
  );
}

在上面的代码中，每当刷新时console.log，都会在谷歌控制台中显示数据两次。App.js如何让它只运行一次？

我用这段代码得到了一个无限循环。

我一直在尝试其他帖子中的一些解决方案，但它们不起作用。

locationAddress 是一个地址数组，我正在尝试使用 Google Maps Geocode API 获取坐标。

    const reducer = (state, action) => {
        switch (action.type) {
            case 'add':
                return [
                    ...state,
                    {
                        address: action.address,
                        name: action.name,
                        id: action.id
                    }
                ];
            case 'remove':
                return state.filter((_, index) => index !== action.index)
            default:
                return state;
        }
    }

    const [locationAddress, setLocationAddress] = useReducer(reducer, []);

    const [coordinates, setCoordinates] = useState([]);

    useEffect(() => {
        const fetchLocation = async () => {
            for(let i = 0; i < locationAddress.length; i++) {
                const response = …

我在我的项目中使用蚂蚁设计。我使用 useEffect 从 redux store 获取数据，如下所示；

const settingsRedux = useSelector(state => state.SETTINGS)

之后，我将此数据用于输入的 defaultValue

<Input 
  defaultValue={settingsRedux.background_image} 
  onChange={e => dispatch({
    type: BACKGROUND_IMAGE, 
    payload: e.target.value
  })}
/>

它实际上有效。但是给出了控制台错误。

Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.

如何在 React 的 useEffect 中为 Axios 调用编写 Jest 测试？

我在这里找到了如何模拟 Axios - /sf/answers/3615829941/

我还知道如何触发 useEffect 如果它是由用户交互（例如单击按钮）调用的。但是在下面的情况下，useEffect 被一个异步函数调用，该函数由 Axios 的响应触发。

例子：

成分

import React, { useState, useEffect } from "react";
import axios from "axios";

const LoadImage = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  const fetchData = async () => {
    return await axios
      .get("https://picsum.photos/200/300.jpg", {
        "Content-Type": "application/xml; charset=utf-8",
      })
      .then((response) => {
        setData(response.config.url);
        setLoading(false);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  useEffect(() => { …