使用 react.js 创建产品后如何正确显示产品预览页面答案

【问题标题】：How to properly display a product preview page after the product is created using react.js使用 react.js 创建产品后如何正确显示产品预览页面
【发布时间】：2019-08-04 16:48:03
【问题描述】：

我正在创建一个简单的eCommerce 应用程序，我想在用户创建产品后将他们重定向到产品预览页面。

我已经尝试在我的UploadProduct component 中使用<Redirect /> 来实现这一点

下面的代码sn-p：

state = {
            productName: '',
            productSize: '',
            productPrize: '',
            category: '',
            description: '',
             // color: [],
            imageFile: null,
            redirect: false
        };

在渲染方法中，我仅在this.state.redirect 时有条件地重定向是的，我在axios post request 之后更新，下面显示了我是如何实现重定向的。

const {redirect} = this.state;

        if(redirect){
            console.log("Im here redirect now", redirect);
            return <Redirect from='/product/new' to='/product/preview' />
        }

我的App.js 状态：

state = {
        products: [],
        productID: null,
        noProducts: false
    };

我更新它的state 使用：

    handleProductCreated = (productID) => {
        this.setState({
            productID //es6
        });
    }

作为props下面的代码传递给uploadProduct component：

<Route path='/product/new' 
render={(routeProps)=> <UploadProduct {...routeProps} productCreated= {this.handleProductCreated}  /> } />

我希望在创建新产品时被重定向到 product preview page put 我收到此错误消息：

index.js:1375 Warning: Can't perform a React state update 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.

我被重定向到/notfound

【问题讨论】：

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

您需要的是异步等待。确保您在其中进行 API 调用的函数正在使用异步等待。由于您尚未发布 API 调用函数。我假设几个部分并在 ES6 中编写下面的代码。

createProduct = async dataForApi => {
    await makeApiCallForCreatingProduct(dataForApi);
    this.setState({ redirect: true })
};

【讨论】：