标签: use-effect

我正在使用 React 和 Redux 开发一个应用程序。我正在尝试使用 API 数据预填充我的输入。为此，我将 API 数据放入 useEffect 中。我也在其中设置我的状态。问题是输入未填充 API 数据。它是空的，但是当我重新加载页面时，它会被填充并且工作正常。

这是我的代码：

编辑问题.js

const EditQuestion = ({ getQuestionById, question: { question, loading }, match: { params } }) => {
  const [formData, setFormData] = useState({ title: "" });

  useEffect(() => {
    // Get data from API
    getQuestionById(params.id);

    // Populate `title` input with API Data
    setFormData({
      title: question !== null && question.title ? question.title : ""
    });

  }, [getQuestionById, params.id]); // If `question` object is passed to this dependency …

我遇到一个问题，我使用扩展运算符设置状态，但函数调用useEffect仅将从 API 拉出的最后一个值设置为状态。

// get all events to display on load
const getEvents = () => {
    console.log(props.id);
    axios.get(API.EVENTS.ROOT + props.id).then(
        res => {
            const data = res.data;
            setEvent(data);
            console.log(data);
            // event start and end dates
            setStart(new Date(data.start));
            setEnd(new Date(data.finish));
            // breakout dates
            for (let i = 0; i < data.breakouts.length; i++) {
                console.log(data.breakouts[i].start);
                data.breakouts[i].start = new Date(data.breakouts[i].start);
                data.breakouts[i].end = new Date(data.breakouts[i].end);
                console.log(data.breakouts[i].name, "test" + data.breakouts[i].start);
                // set date picker initial value 
                setFields({
                    ...fields,
                    [data.breakouts[i].name]: data.breakouts[i].start
                })
                console.log(fields); …

我正在使用自定义钩子从 API 中提取一些数据，以便在一组 React 函数组件中使用。然而，esLint 抛出了一个可爱的警告：

React Hook useEffect 缺少依赖项：'fetchFromAPI'。包括它或删除依赖项数组。

我不认为这是一种依赖，因为它就在useFetch()其内部。我需要在使用时这样做await。我究竟做错了什么？可以关闭这条线的警告吗？或者我应该使用更规范的语法吗？

function useFetch (url) {
  const [data, setData] = useState(null);

  async function fetchFromAPI() {
    const json = await( await fetch(url) ).json();
    setData(json);
  }

  useEffect(() => {fetchFromAPI()},[url]);

  return data;
};

export {
  useFetch
};

我正在练习反应挂钩，并且正在创建一个非常简单的秒表应用程序。目前，我的代码正在做我想要它做的事情，但我不明白它为什么起作用。当我点击开始时，setTimeouts 运行并不断更新时间状态。当我点击停止时，它会清除超时。当我没有明确告诉它时，为什么它会清除超时。另外，根据react文档，useEffect中的返回仅在组件卸载时运行。但是，我将 console.logs 放入其中，发现每次调用 useEffect 时它都会运行返回的回调。最后，我删除了返回的回调，发现当我停止时它实际上并没有清除超时。有人可以帮我剖析一下吗？

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

function Stopwatch(){

  const [time, setTime] = useState(0);
  const [start, setStart] = useState(false);

  useEffect(() => {
    let timeout;
    if (start) {
      timeout = setTimeout(() => {setTime(currTime => currTime + 1);}, 1000);
    }

    return () => {
      clearTimeout(timeout);
    }
  });

  return(
    <>
      <div>{time}</div>
      <button onClick={() => setStart(currStart => !currStart)}>{start ? "Stop" : "Start"}</button>
    </>
  )
}

export default Stopwatch

我正在我的 React 功能组件中动态添加卡片。卡片存储在状态中。我映射它们并给每个人提供 id。OnClick 在那些卡片上我成功地获得了他们的 id。现在我想 getElementById 来改变卡片颜色：

function Clicked(pressedGifId) {
  if (pressedGifId === 'correctGif') CorrectMatch();
  else WrongMatch();
}

function CorrectMatch(pressedGifId) {
  // / THERE I GET Element: null
  console.log('Element:', document.getElementById(pressedGifId));
}
function WrongMatch() {
  console.log('wrong a match!');
}

export default function GameObject(props) {
  const addedToGameGif = [];
  const [pressedGifId, gifPressed] = useState(null);
  const [photoCards, setPhotoCards] = useState([]);

  useEffect(() => {
    Clicked(pressedGifId);
  }, [pressedGifId]);

  // add randomly picked photos to addedToGameGif array
  // ...

  addedToGameGif.map(gifId =>
    photoCards.push(
      <Card id={gifId} onClick={() …

我正在使用一个函数 (getActorInfo()) 来响应从 api 获取信息并将其设置为状态。它可以工作，但该功能不会停止运行。

export default function ActorProfile({ name, img, list, id, getActorInfo }) {
  const [showList, setShowList] = useState(false);
  const [actorInfo, setActorInfo] = useState({});

  getActorInfo(id).then(val => setActorInfo(val));

  console.log(actorInfo)

  return (
    <Wrapper>
      <Actor
        id={id}
        name={name}
        img={img}
        onClick={() => {
          setShowList(!showList);
        }}
        actorBirthday={actorInfo.actorBirthday}
      />
      {showList && <MovieList list={list} actorInfo={actorInfo} />}
    </Wrapper>
  );
}

我试过像这样使用 useEffect

  useEffect(() => {
    getActorInfo(id).then(val => setActorInfo(val));
  }, {});

但我收到一个我不明白的错误

无法对卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。在 ActorProfile 中（在 App.js:60）

我的问题是如何让这个函数只运行一次？

我有一个使用 useState 初始化状态的功能组件，然后通过输入字段更改该状态。

然后，我有一个模拟 componentWillUnmount 的 useEffect 挂钩，以便在组件卸载之前，将当前更新的状态记录到控制台。但是，会记录初始状态而不是当前状态。

这是我想要做的事情的简单表示（这不是我的实际组件）：

import React, { useEffect, useState } from \'react\';\n\nconst Input = () => {\n    const [text, setText] = useState(\'aaa\');\n\n    useEffect(() => {\n        return () => {\n            console.log(text);\n        }\n    }, [])\n\n    const onChange = (e) => {\n        setText(e.target.value);\n    };\n\n    return (\n        <div>\n            <input type="text" value={text} onChange={onChange} />\n        </div>\n    )\n}\n\nexport default Input;\n

我将状态初始化为“初始”。然后我使用输入字段来更改状态，假设我输入“新文本”。但是，当组件卸载时，控制台将记录“初始”而不是“新文本”。

为什么会出现这种情况？如何在卸载时访问当前更新的状态？

非常感谢！

编辑：

将文本添加到 useEffect 依赖项数组并不能解决我的问题，因为在我的现实场景中，我想要做的是根据当前状态触发异步操作，并且它不会 \xe2\x80\x99t每次 \xe2\x80\x9ctext\xe2\x80\x9d 状态更改时都可以有效地执行此操作。

I\xe2\x80\x99m 正在寻找一种仅在组件卸载之前获取当前状态的方法。

我的应用程序的删除功能工作正常，但是它要求用户在单击删除按钮后手动刷新页面才能查看数据库中的新元素列表。我想在点击事件后自动刷新。我在这个项目中使用反应钩子。然而，如果我删除，我找到了一个解决方案useEffect's []，但在我的后端它显示，它的请求疯狂。我不知道，删除 useffect 的[ ]是否明智？

这是从后端获取数据并将 props 传递给另一个组件的组件

 import React, { useState, useEffect } from "react";
    import axios from "axios";
    import Table from "../Table/Table";
    import "./Display.css";
    const Display = () => {
      const [state, setState] = useState({ students: [], count: "" });
      const [searchItem, setsearchItem] = useState({
        item: ""
      });

      const Search = e => {
        setsearchItem({ item: e.target.value });
      };

      useEffect(() => {
        axios
          .get("/students")
          .then(response => {
            setState({
              students: response.data.students,
              count: response.data.count
            });
          }) …

在我的 React 应用程序中，我渲染了不同的<Item>组件实例，我希望它们在上下文中注册/取消注册，具体取决于它们当前是否已安装。

我正在使用两个上下文（ItemContext提供已注册的项目，ItemContextSetters提供注册/取消注册的功能）来执行此操作。

const ItemContext = React.createContext({});
const ItemContextSetters = React.createContext({
  registerItem: (id, data) => undefined,
  unregisterItem: (id) => undefined
});

function ContextController(props) {
  const [items, setItems] = useState({});

  const unregisterItem = useCallback(
    (id) => {
      const itemsUpdate = { ...items };
      delete itemsUpdate[id];
      setItems(itemsUpdate);
    },
    [items]
  );

  const registerItem = useCallback(
    (id, data) => {
      if (items.hasOwnProperty(id) && items[id] === data) {
        return;
      }

      const itemsUpdate = { ...items, [id]: data }; …

我正在使用 sdk，根据文档，我必须加载脚本：

 <body>
 <script>
    my sdk code
    my sdk code
    my sdk code
  </script>
  ..
  ..
  </body>

你如何看到内部标签我有sdk代码。我正在使用 reactJs，我想在useEffect 钩子中加载这个脚本。
问题：sdk 的脚本如何运行，而不是在 body 标签中，而是在useEffect钩子中？