Javascript 如何在React中设置卸载组件中的状态

如何在参数内设置

componentDidMount

hook中的状态

我的问题是React通知的警告：

Warning: Can't call setState (or forceUpdate) on an unmounted 
component. This is a no-op, but it indicates a memory leak in your 
application. To fix, cancel all subscriptions and asynchronous tasks in the 
componentWillUnmount method.
in DiscoverPage (created by Route)

在my

DiscoveryPage

组件中：

import React，{Component}来自'React'；
从“react router dom”导入{交换机、路由、重定向}；
从“/TvShows”导入电视节目；
从“./Movies”导入电影；
从“./MoviePage/MovieDetail”导入电影详细信息；
从“./TvShowPage/TvDetail”导入TvDetail；
类发现页扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：{}
}
}
getDataItem=（数据）=>{
this.setState（{data:data}）；
};
render（）{
返回(
} />
} />
} />
} />
);
}
}
导出默认发现页面；

在子组件中（本例为

Movies

component）：

import React，{Component}来自'React'；
从“../api”导入requestApi；
从“./MoviePage/MovieList”导入电影列表；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：{
页码：1，
结果：[]
}
}
}
componentDidMount（）{
requestApi.fetchData（'discover'，'movie'）。然后（response=>{
this.setState（{data:response.data，isLoading:false}）；
});
}
getMoviebyId=（id）=>{
requestApi.fetchDataById（'movie'，id.），然后（response=>{
这个.props.data（response.data）；
});
};
下一页=（e）=>{
const page=this.state.data.page+1；
fetchDataPaginate（'discover'，'movie'，page）。然后（response=>{
this.setState（{data:response.data}）；
});
};
预分页=（e）=>{
const page=this.state.data.page-1；
fetchDataPaginate（'discover'，'movie'，page）。然后（response=>{
this.setState（{data:response.data}）；
});
};
render（）{
返回(
发现新的电影和电视节目
);
}
}
导出默认电影；

我认为您缺少从

react-router-dom

import { Switch, Route, Redirect, BrowserRouter } from 'react-router-dom'; // Add BrowserRouter

class DiscoverPage extends Component {

...
render() {
    return (
    <BrowserRouter> // Add this 
        <Switch>
            <Route exact path="/discover/movie" render={props => <Movies data={this.getDataItem} {...props} />} />
            <Route path="/discover/tv" render={props => <TvShows data={this.getDataItem} {...props} />} />
            <Route path="/movie/:movie" render={props => <MovieDetail data={this.state.data} {...props} />} />
            <Route path="/tv/:tv" render={props => <TvDetail data={this.state.data} {...props} />} />
            <Redirect to="/discover/movie" />
        </Switch>
    </BrowserRouter>
    );
}
}

从'react router dom'导入{Switch，Route，Redirect，BrowserRouter}；//添加浏览器路由器
类发现页扩展组件{
...
render（）{
返回(
//加上这个
} />
} />
} />
} />
);
}
}

我认为您缺少从

react-router-dom

import { Switch, Route, Redirect, BrowserRouter } from 'react-router-dom'; // Add BrowserRouter

class DiscoverPage extends Component {

...
render() {
    return (
    <BrowserRouter> // Add this 
        <Switch>
            <Route exact path="/discover/movie" render={props => <Movies data={this.getDataItem} {...props} />} />
            <Route path="/discover/tv" render={props => <TvShows data={this.getDataItem} {...props} />} />
            <Route path="/movie/:movie" render={props => <MovieDetail data={this.state.data} {...props} />} />
            <Route path="/tv/:tv" render={props => <TvDetail data={this.state.data} {...props} />} />
            <Redirect to="/discover/movie" />
        </Switch>
    </BrowserRouter>
    );
}
}

从'react router dom'导入{Switch，Route，Redirect，BrowserRouter}；//添加浏览器路由器
类发现页扩展组件{
...
render（）{
返回(
//加上这个
} />
} />
} />
} />
);
}
}

我们可以在组件安装中设置状态，如：

componentDidMount(){
    var {state, setState} = this.props;
    setState({doNotRender: true});
}

componentDidUpdate(){
    var {state, setState} = this.props;
    if(!state.doNotRender){ //any_condition ur choice
       setState({doNotRender: true});
    }
}

而是使用组件更新，如：

componentDidMount(){
    var {state, setState} = this.props;
    setState({doNotRender: true});
}

componentDidUpdate(){
    var {state, setState} = this.props;
    if(!state.doNotRender){ //any_condition ur choice
       setState({doNotRender: true});
    }
}

---

我们可以在组件安装中设置状态，如：

componentDidMount(){
    var {state, setState} = this.props;
    setState({doNotRender: true});
}

componentDidUpdate(){
    var {state, setState} = this.props;
    if(!state.doNotRender){ //any_condition ur choice
       setState({doNotRender: true});
    }
}

而是使用组件更新，如：

componentDidMount(){
    var {state, setState} = this.props;
    setState({doNotRender: true});
}

componentDidUpdate(){
    var {state, setState} = this.props;
    if(!state.doNotRender){ //any_condition ur choice
       setState({doNotRender: true});
    }
}

---

当路由更改时，DiscoverPage组件将卸载，然后调用getDataItem方法。这就是react抛出错误的原因

我建议使用react router组件方法，而不是渲染并将数据移动到任何组件都可以访问的存储区。提及

例如：

<Route path="/user/:username" component={User}/>

---

当路由更改时，DiscoveryPage组件将卸载，之后调用getDataItem方法。这就是react抛出错误的原因

我建议使用react router组件方法，而不是渲染并将数据移动到任何组件都可以访问的存储区。提及

例如：

<Route path="/user/:username" component={User}/>

---

需要进行一些更改，您使用的逻辑效率不高
我从你的问题中了解到这很好

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import TvShows from './TvShows';
import Movies from './Movies';
import MovieDetail from '../MoviePage/MovieDetail';
import TvDetail from '../TvShowPage/TvDetail';

class DiscoverPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {}
        };
    }
    getALLDATA() {
        //update your state after your request
        request().then(res => {
            this.setState({
                data: res.data
            });
        });
    }
    componentDidMount() {
        this.getALLDATA();
    }
    getDataItem = () => {
        return this.state.data;
    };

    render() {
        return (
            <Switch>
                <Route exact path="/discover/movie" render={props => <Movies data={this.getDataItem} {...props} />} />
                <Route path="/discover/tv" render={props => <TvShows data={this.getDataItem} {...props} />} />
                <Route path="/movie/:movie" render={props => <MovieDetail data={this.state.data} {...props} />} />
                <Route path="/tv/:tv" render={props => <TvDetail data={this.state.data} {...props} />} />
                <Redirect to="/discover/movie" />
            </Switch>
        );
    }
}

export default DiscoverPage;

import React，{Component}来自'React'；
从“react router dom”导入{交换机、路由、重定向}；
从“/TvShows”导入电视节目；
从“./Movies”导入电影；
从“../MoviePage/MovieDetail”导入MovieDetail；
从“../TvShowPage/TVTail”导入TVTail；
类发现页扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：{}
};
}
getALLDATA（）{
//在您的请求后更新您的状态
请求（）。然后（res=>{
这是我的国家({
数据：res.data
});
});
}
componentDidMount（）{
这个函数是.getALLDATA（）；
}
getDataItem=（）=>{
返回此.state.data；
};
render（）{
返回(
} />
} />
} />
} />
);
}
}
导出默认发现页面；

需要进行一些更改，您使用的逻辑效率不高
我从你的问题中了解到这很好

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import TvShows from './TvShows';
import Movies from './Movies';
import MovieDetail from '../MoviePage/MovieDetail';
import TvDetail from '../TvShowPage/TvDetail';

class DiscoverPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {}
        };
    }
    getALLDATA() {
        //update your state after your request
        request().then(res => {
            this.setState({
                data: res.data
            });
        });
    }
    componentDidMount() {
        this.getALLDATA();
    }
    getDataItem = () => {
        return this.state.data;
    };

    render() {
        return (
            <Switch>
                <Route exact path="/discover/movie" render={props => <Movies data={this.getDataItem} {...props} />} />
                <Route path="/discover/tv" render={props => <TvShows data={this.getDataItem} {...props} />} />
                <Route path="/movie/:movie" render={props => <MovieDetail data={this.state.data} {...props} />} />
                <Route path="/tv/:tv" render={props => <TvDetail data={this.state.data} {...props} />} />
                <Redirect to="/discover/movie" />
            </Switch>
        );
    }
}

export default DiscoverPage;

import React，{Component}来自'React'；
从“react router dom”导入{交换机、路由、重定向}；
从“/TvShows”导入电视节目；
从“./Movies”导入电影；
从“../MoviePage/MovieDetail”导入MovieDetail；
从“../TvShowPage/TVTail”导入TVTail；
类发现页扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：{}
};
}
getALLDATA（）{
//在您的请求后更新您的状态
请求（）。然后（res=>{
这是我的国家({
数据：res.data
});
});
}
componentDidMount（）{
这个函数是.getALLDATA（）；
}
getDataItem=（）=>{
返回此.state.data；
};
render（）{
返回(
} />
} />
} />
} />