相关疑难解决方法(0)

在React的这个文档中,据说

shallowCompare对当前props和nextProps对象以及当前state和nextState对象执行浅等式检查.

我无法理解的事情是If It浅层比较对象,那么shouldComponentUpdate方法将始终返回true,如

我们不应该改变国家.

如果我们没有改变状态,那么比较将始终返回false,因此shouldComponent更新将始终返回true.我很困惑它是如何工作的,我们将如何覆盖它以提高性能.

这是这个问题的后续问题，最接近我的问题：

useEffect 中的无限循环

我正在创建一个小型 React.js 应用程序来研究该库。我收到此警告：

超出最大更新深度。当组件在 useEffect 中调用 setState 时会发生这种情况，但 useEffect 要么没有依赖项数组，要么依赖项之一在每次渲染时发生变化。

我有一个功能组件，其中有以下代码：

const propertiesMap2 = new Map([  //There is also propertiesMap1 which has the same structure
["TITLE4",
    {
        propertyValues: {
            myProperty10 : "myVal1",
            myProperty11 : "myVal2",
            myProperty12 : "myVal3",                                                            
        },
        isOpen: true
    }
],
["TITLE5",
    {
        propertyValues: {
            myProperty13 : "myVal4",
            myProperty14 : "myVal5",
            myProperty15 : "myVal6",                                                             
        },
        isOpen: true
    }
],
["TITLE6",
    {
        propertyValues:{
            myProperty16 : "myVal7",
            myProperty17 : "myVal8",
            myProperty18 : "myVal9",
        },
        isOpen: true
    } …

我有一个与此非常相似的问题 -如何修复 React Hook useEffect 中缺少的依赖项。

有一个关键区别 - 我将一个 fetch 函数传递给要从useEffect调用的子组件，所以我不能简单地将该函数移动到效果的主体中。每次渲染都会重新创建 fetch 函数并导致无限循环。我还有其他本地组件状态想要触发效果。

我基本上有一个容器组件和一个演示组件。MyPage 是 MyGrid 的父级并设置所有 redux 状态：

const MyPage = () => {

  const dispatch = useDispatch();
  const items= useSelector(selectors.getItems);
  const fetching = useSelector(selectors.getFetching);
  const fetchItems = opts => dispatch(actions.fetchItems(opts));

  return (
    <>
      {fetching && <div>Loading...</div>}
      <h1>Items</h1>
      <MyGrid
        items={items}
        fetchItems={fetchItems}
        fetching={fetching}
      />
    </>
  );

}

const MyGrid = ({ fetchItems, items, fetching }) => {

  const [skip, setSkip] = useState(0);
  const take = 100; …

在基于类的组件中：

componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
        this.setState({
            posts: res.data.slice(0, 10)
        });
        console.log(posts);
    })
}

我尝试了这个：

const [posts, setPosts] = useState([]);

useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
        setPosts(res.data.slice(0, 10));
        console.log(posts);
    })
});

它创建了一个无限循环。如果我将[] / {}作为第二个参数[1] [2]传递，则它将阻止进一步的调用。但这也阻止了数组的更新。

[1]使用中的无限循环

[2] 如何仅使用一次React使用useEffect调用加载函数

我正在使用 React.js、node 和 socket.io 创建一个聊天应用程序。对于最初的 2-3 个请求，它工作得绝对正常，但之后设备就会无限挂起。

我认为问题出在我的代码逻辑上。这是我的前端：

import React from "react";
import SendIcon from "@material-ui/icons/Send";
import "./chat.css";
import queryString from "query-string";
import { useEffect } from "react";
import { userName, roomId } from "./login.jsx";
import { useLocation } from "react-router-dom";
import { useState } from "react";
import chat from "./chat.svg";
import TextField from "@material-ui/core/TextField";
import AccountCircleSharpIcon from "@material-ui/icons/AccountCircleSharp";
import FingerprintSharpIcon from "@material-ui/icons/FingerprintSharp";
import io from "socket.io-client";

let socket;

function Chat() {
  let [name, setName] = useState();
  let [room, setRoom] …

我正在尝试使用 React 钩子来重建一些作为功能组件的类组件来进行获取。

我可以获取数据，这很好，但它每隔几毫秒调用一次我的 API，我只是希望它获取数据并停止，就像它在具有 componentDidMount 的类组件中一样。

我想我能明白它为什么这样做（函数内的 fetchData() 意味着它只会继续调用自己）但我不知道如何修复它。

我尝试添加一个 setInterval，更改顺序，并将 fetchData() 移到函数之外（该组件不会呈现，因为它当时是未定义的）。

const MyFunction = () => {

const [apiResponse,setApiResponse] = useState({})

  async function fetchData() {

    const res = await fetch(`http://localhost:9000/example`,{
      method: 'POST',
      mode: 'cors',
      body: JSON.stringify({date: '20190707'}),
      headers: {'content-type': 'application/json',
      credentials: 'include'
    }
    })
  res
  .json()
  .then(res => setApiResponse(res))
  }

useEffect(() => {

  fetchData();

});


var queryResult = apiResponse['units']


return (
  <React.Fragment>  
    <CardHeader color={"info"} stats icon>
    <CardIcon color={"info"}>
    <Icon>{"trending_up"}</Icon>
    </CardIcon>
    <p className={''}>Drop In</p>
      <h3 className={''}>
        {queryResult} <small>Units</small> …

我使用create-react-app创建了一个项目，
并尝试使用React挂钩，
在下面的示例中，
该语句console.log(articles)不断运行：

import React, {useState, useEffect} from "react"
import {InfiniteScroller} from "react-iscroller";
import axios from "axios";
import './index.less';

function ArticleList() {
    const [articles, setArticles] = useState([]);

    useEffect(() => {
        getArticleList().then(res => {
           setArticles(res.data.article_list);
            console.log(articles);  
        });
    },[articles]);

    const getArticleList = params => {
        return axios.get('/api/articles', params).then(res => {
            return res.data
        }, err => {
            return Promise.reject(err);
        }).catch((error) => {
            return Promise.reject(error);
        });
    };


    let renderCell = (item, index) => {
        return (
            <li key={index} style={{listStyle: …

我正在尝试设置变量“工作区”的状态，但是当我控制台记录数据时，我得到了无限循环。我在 useEffect() 内部调用 axios“get”函数，并在此循环外部调用控制台日志记录，所以我不知道是什么触发了所有重新渲染。我在这个问题中没有找到我的具体问题的答案。这是我的代码：

function WorkspaceDynamic({ match }) {
  const [proposals, setProposals] = useState([{}]);
  useEffect(() => {
    getItems();
  });

  const getItems = async () => {
    const proposalsList = await axios.get(
      "http://localhost:5000/api/proposals"
    );
    setProposals(proposalsList.data);
  };

  const [workspace, setWorkspace] = useState({});
  function findWorkspace() {
    proposals.map((workspace) => {
      if (workspace._id === match.params.id) {
        setWorkspace(workspace);
      }
    });
  }

有谁看到可能导致重新渲染的原因吗？谢谢！