标签: use-effect

我有以下功能：

function handleEnterPress(e) {
    if (e.keyCode === 13) {
      if (value !== "") {
        let toAdd = true;
        chips.forEach(chip => {
          if (chip.value === value) {
            toAdd = false;
          }
        });
        if (toAdd) {
          let chipsCopy = [...chips, { value, isDisabled: false }];
          setChips(chipsCopy);
        }
      }
      setValue("");
    }
  }

我有以下内容useEffect：

useEffect(() => {
    inputRef.current.addEventListener("keyup", handleEnterPress);
    return () =>
      inputRef.current.removeEventListener("keyup", handleEnterPress);
  }, [value]);

现在反应给了我一个警告：

React Hook useEffect 缺少依赖项“handleEnterPress”。

handleEnterPress当我们添加第二个参数数组时，会有什么区别？

其实我没有得到这个问题的正确观点。所以寻求帮助。我有这个状态全功能组件。我在这里注意到的是，当我使用 useEffect 钩子获取数据时，我会正确地得到响应。

问题是，当我在 return 语句中执行 console.log("ok") 时，它会在控制台中多次提供输出。图片添加如下：

这是我的状态和 useEffect 钩子

这是我的返回函数

这是我每次浏览页面时得到的控制台输出。

为什么 console.log("ok") 执行多次？

比较以下两个组件：

儿童.js

import React, { useEffect } from "react";

function Child({ count, setCount }) { // Note: Has parameter
  useEffect(() => {
    setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
  }, []);

  return <div>{count}</div>;
}

export default Child;

Child2.js

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

function Child2() { // Note: No parameter
  const [count, setCount] = useState(0); // State variable assigned in component

  useEffect(() => {
    setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000); …

我有一个谜。考虑以下自定义 React 钩子，它按时间段获取数据并将结果存储在 a 中Map：

export function useDataByPeriod(dateRanges: PeriodFilter[]) {
    const isMounted = useMountedState();

    const [data, setData] = useState(
        new Map(
            dateRanges.map(dateRange => [
                dateRange,
                makeAsyncIsLoading({ isLoading: false }) as AsyncState<MyData[]>
            ])
        )
    );

    const updateData = useCallback(
        (period: PeriodFilter, asyncState: AsyncState<MyData[]>) => {
            const isSafeToSetData = isMounted === undefined || (isMounted !== undefined && isMounted());
            if (isSafeToSetData) {
                setData(new Map(data.set(period, asyncState)));
            }
        },
        [setData, data, isMounted]
    );

    useEffect(() => {
        if (dateRanges.length === 0) {
            return;
        } …

im trying to create an api request with the header value, that is received from a context component. However, as soon as the page component is loaded, it throws an Cannot read property '_id' of null exception. Is there a way to run the useEffect function, as soon as the context is loaded?

main component:

import React, { useState, useEffect, useContext } from "react";
import "./overview.scss";

/* COMPONENTS */;
import axios from 'axios';
import { GlobalContext } from '../../components/context/global';

const …

我正在尝试使用 useEffect 从 API 中获取一些数据。我成功地获取了数据，但是在设置状态并尝试通过它进行映射后，我只是得到“无法读取未定义的地图”。我认为问题在于它在获得响应之前正在运行我的 .map() 代码。我只是不确定如何解决这个问题

这是 API 响应：

data: {count: 87, next: "https://swapi.co/api/people/?page=2", previous: null, results: Array(10)}

这是我的代码

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';
import CharacterMap from './characterMap'

const App = () => {
  let [getChars, setChars] = useState(0);
  useEffect(() => {
    axios.get(`https://swapi.co/api/people/`)
      .then(res => setChars(res) )
  },[]);
 console.log(getChars.data.map((e) => e))
  return (

    <div className="App">
      <CharacterMap info={getChars} />
    </div>
  );
}
export default App;

我正在使用 Redux 订阅商店并更新组件。

这是一个没有 Redux 的简化示例。它使用一个模型商店来订阅和分派。

请按照代码段下面的步骤重现问题。

编辑：请跳到更新下的第二个演示片段，以获得更简洁、更接近现实生活的场景。问题不在于 Redux。这是关于 React 的 setState 函数标识在某些情况下导致重新渲染，即使状态没有改变。

编辑 2：在“更新 2 ”下添加了更简洁的演示。

const {useState, useEffect} = React;

let counter = 0;

const createStore = () => {
	const listeners = [];
	
	const subscribe = (fn) => {
		listeners.push(fn);
		return () => {
			listeners.splice(listeners.indexOf(fn), 1);
		};
	}
	
	const dispatch = () => {
		listeners.forEach(fn => fn());
	};
	
	return {dispatch, subscribe};
};

const store = createStore();

function Test() {
	const …

我对 React、函数式编程、Javascript 和 JSX 还很陌生，所以如果这是一个愚蠢的问题，请简单点。

我正在修改react-table v7 中的示例material-ui 表之一。原始代码可以在这里找到。该示例功能齐全，并且使用 React Hooks 而不是类，我正在使用的模板的所有组件也是如此（向 Creative-tim.com 致敬！）

我的父函数（代表仪表板应用程序中的页面），例如 Users.js 或 Stations.js 从 useEffect 挂钩内的后端 api 获取数据。然后，该数据作为 props 传递给我的子组件 ReactTables.js

由于某种原因，在父页面的 useEffect 完成后，ReactTables.js 不会收到对“data”属性的更改。但是，一旦我修改 ReactTables 子组件（在本例中为 AddAlarmDialog.js）中的数据，表就会重新呈现，并且我的所有数据都会突然出现。

当父组件的 useEffect 返回数据时，如何触发子组件的重新渲染？我注意到在旧版本的 React 中，有一个名为 componentWillReceiveProps() 的生命周期函数。这是我需要在这里效仿的行为吗？

父组件示例 (Alarms.js)：

import React, { useEffect, useState } from "react";
// @material-ui/core components

// components and whatnot
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

import ReactTables from "../../components/Table/ReactTables";

import { server } from "../../variables/sitevars.js";

export default function …

我有一个这样的例子：

代码和盒子

我想在回调中修改一个状态值，然后使用新的状态值修改另一个状态。

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("0");
  const [added, setAdded] = useState(false);

  const aNotWorkingHandler = useCallback(
    e => {
      console.log("clicked");
      setCount(a => ++a);
      setText(count.toString());
    },
    [count, setCount, setText]
  );

  const btnRef = useRef(null);
  useEffect(() => {
    if (!added && btnRef.current) {
      btnRef.current.addEventListener("click", aNotWorkingHandler);
      setAdded(true);
    }
  }, [added, aNotWorkingHandler]);

return <button ref={btnRef}> + 1 </button>

但是，在调用该处理程序后，count已成功增加，但text没有增加。

你们能帮我理解为什么会发生这种情况吗？以及如何干净地避免它？

谢谢你！

我想等待 10 秒，以便 API 调用从后端获取类别列表数组并存储在挂钩状态中。如果 10 秒内没有获取任何内容，我想将错误挂钩状态设置为 true。

但问题是，即使在最初获取数组之后，错误状态也会设置为 true，并且处于状态的categoriesList 数组会在 10 秒后消失。

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

import { doGetAllCategories } from "../helper/adminapicall.js";

const ViewCategories = () => {
  let [values, setValues] = useState({
    categoriesList: "",
    error: false,
  });

  let { categoriesList, error } = values;

  const preloadCategories = () => {
    doGetAllCategories()
      .then((data) => {
        if (data.error) {
          return console.log("from preload call data - ", data.error);
        }
        setValues({ ...values, categoriesList: data.categories });
      })
      .catch((err) => …