相关疑难解决方法(0)

在我的react组件中,我试图在ajax请求正在进行时实现一个简单的微调器 - 我使用state来存储加载状态.

出于某种原因,我的React组件中的这段代码会抛出此错误

只能更新已安装或安装的组件.这通常意味着您在已卸载的组件上调用了setState().这是一个无操作.请检查未定义组件的代码.

如果我摆脱第一个setState调用,则错误消失.

constructor(props) {
  super(props);
  this.loadSearches = this.loadSearches.bind(this);

  this.state = {
    loading: false
  }
}

loadSearches() {

  this.setState({
    loading: true,
    searches: []
  });

  console.log('Loading Searches..');

  $.ajax({
    url: this.props.source + '?projectId=' + this.props.projectId,
    dataType: 'json',
    crossDomain: true,
    success: function(data) {
      this.setState({
        loading: false
      });
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
      this.setState({
        loading: false
      });
    }.bind(this)
  });
}

componentDidMount() {
  setInterval(this.loadSearches, this.props.pollInterval);
}

render() {

    let searches = this.state.searches || [];


    return (<div>
          <Table striped …

我正在尝试下面的useEffect示例:

useEffect(async () => {
    try {
        const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}, []);

我在我的控制台中收到此警告.但我认为清理对于异步调用是可选的.我不知道为什么我会收到这个警告.链接沙箱的例子.https://codesandbox.io/s/24rj871r0p

我有一个功能组件，我从 localStorage 获取一个值并使用该值在状态中设置一个值：

localforage.getItem<string>('sortType').then((value) => {
  setSortType(value)
})

const [sortType, setSortType] = useState('release_date');

当我运行组件时，我得到一个日志：

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

我已经读到发生这种情况是因为我在localforage.getItem状态上使用了异步方法。但是我还没有找到可以在功能组件中工作的解决方案。

我有这个代码.我想要做的是当我点击一个按钮'功能'时,它将带我去索引路线.然而,React一直说'无法读取未定义的属性推送'我做错了什么？

route.js

import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory, IndexRoute } from "react-router";

import Layout from "./page/Layout";
import Features from "./page/Features";
import Features from "./page/archive";

const app = document.getElementById('app');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

布局组件

import React from "react";
import {Link, Router, Route, hashHistory} from "react-router";
export default class Layout extends React.Component{
    navigate(){
        this.context.router.push('/');
    }
    render(){ 
        return(
            <div>
                {this.props.children}
                <button onClick={this.navigate.bind(this)}>feature</button>
            </div>
        )
    } …

我正在为前端使用 react 和 react 钩子，但出现此错误：

index.js:1 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
    in Login (created by Context.Consumer)
    in Route (at App.js:46)
    in AuthContextProvider (at App.js:37)
    in Switch (at App.js:36)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:32)
    in div (at App.js:30)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2273
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
warnAboutRenderPhaseUpdatesInDEV …

更新未挂载组件的状态如何导致内存泄漏？

已知如何修复以下错误（一种解决方案，另一种解决方案）

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

但是，当组件刚刚被解除并且不再需要时，用“isUnmounted”检查乱扔我的承诺链似乎很奇怪。这如何导致内存泄漏？

在 React 功能组件中取消异步请求的正确方法是什么？

我有一个脚本，它在加载时（或在某些用户操作下）从 API 请求数据，但如果这是正在执行的过程中并且用户导航离开，则会导致以下警告：

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

我读过的大部分内容都使用基于类的组件AbortController的componentDidUnmount方法解决了这个问题。而我的 React 应用程序中有一个功能组件，它使用 Axois 向 API 发出异步数据请求。

该函数驻留在useEffect功能组件中的钩子中，以确保在组件呈现时运行该函数：

  useEffect(() => {
    loadFields();
  }, [loadFields]);

这是它调用的函数：

  const loadFields = useCallback(async () => {
    setIsLoading(true);
    try {
      await fetchFields(
        fieldsDispatch,
        user.client.id,
        user.token,
        user.client.directory
      );
      setVisibility(settingsDispatch, user.client.id, user.settings);
      setIsLoading(false);
    } catch (error) {
      setIsLoading(false);
    }
  }, [
    fieldsDispatch,
    user.client.id,
    user.token,
    user.client.directory,
    settingsDispatch,
    user.settings,
  ]);

这是触发的 axios 请求：

async function fetchFields(dispatch, clientId, token, folder) {
  try { …