Question

我在单击NavLink时会触发一个函数，该函数会将其重定向到另一个页面，但是在重定向时，它不执行任何类似console.log（“ Hi”）;之类的任务。

 <NavLink to="/data" onClick={this.performTask} exact ={

重定向后如何执行这些功能？

performTask(event) {

    //browserHistory.push("/data/"+this.state.category1+'/'+this.state.zip1+'/'+this.state.age1+'/'+'/'+this.state.gender1);
    console.log(this);
    console.log(this.state.zip1);
    console.log(this.state.age1);
    console.log("asd");
    console.log(window.location.href);
    fetch('/api/customers/'+this.state.category1+'/'+this.state.zip1+'/'+this.state.age1+'/'+'/'+this.state.gender1)
        .then(res => res.json())
        .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)));
    event.preventDefault();
}

Answer 1

您不能重定向然后在同一组件内执行某些操作。

一些解决方法：

执行操作后重定向

将performTask更改为：

$('.rainbow2').removeClass('rainbow2')

如果先前的任务中的任何一个异步，则必须等待：

for (all pixels in image) { if (pixel.red < 100) then pixel = 0xffffff; }

重定向和管理重定向组件中的操作

如果您重定向到给定的路由，请在该路由所路由到的组件中，根据组件是否已经安装来更改componentDidMount或componentWillReceiveProps函数。

performTask(event) {
    event.preventDefault(); // prevent first
    console.log(this);
    console.log(this.state.zip1);
    console.log(this.state.age1);
    console.log("asd");
    console.log(window.location.href);
    fetch('/api/customers/'+this.state.category1+'/'+this.state.zip1+'/'+this.state.age1+'/'+'/'+this.state.gender1)
        .then(res => res.json())
        .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)));
    // redirect 
    browserHistory.push("/data/" + this.state.category1 +'/' + this.state.zip1 + '/' + this.state.age1 + '/'+'/' + this.state.gender1);
}

并在您的RedirectedComponent中：

async performTask(event) {
    await doAsync();
    // redirect 
    browserHistory.push("/data/" + this.state.category1 +'/' + this.state.zip1 + '/' + this.state.age1 + '/'+'/' + this.state.gender1); 
}

重定向后，React不执行任何操作

1 个答案: