使用 react js / node js 中的数据在发布请求后重定向

Question

在向我的节点 js 服务器发出发布请求后，我正尝试将数据发送到另一个组件页面。

要重定向的第一个组件：（我无法发布所有代码，它太大了

fetch('http://localhost:8080/createVolume', requestOptions)
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    this.setState({
                        ansibleAnswer: data,
                        submitted: true
                    })
                    console.log(this.state.ansibleAnswer);
                });
.
.
.
// uderneeth my render

        } else if (this.state.loaded === true && this.state.submitted === true) {
            return (
                <Redirect to={{
                    pathname: '/Completed',
                    state: { name: this.state.name, result: this.state.ansibleAnswer }
                }}
                />
            );

发布请求后的新组件：

class Completed extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: this.props.location.state.name,
            result: this.props.location.state.ansibleAnswer
        };
    }

    render() {
        return (
            <div>
                <Header />
                <div>
                    <p>test successful</p>
                    <p>{this.state.result}</p>
                </div>
                <Footer />
            </div>
        );
    }
}


export default Completed;

我得到这个错误：

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

我了解数据未保存在状态中，但我不明白如何在将数据发送到其他组件之前保存（或等待）它。

谢谢

Answer 1

        class Completed extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    name: '',
                    result: ''
                };
            }

        /** When the Completed component does anything with the new props,
        * componentWillReceiveProps is called, with the next props as the argument */

        componentWillReceiveProps(nextProps) {

            /** Update  state**/

            if (nextProps.location.state.result !== 
            this.props.location.state.result) {
            this.setState({ 
                result:nextProps.location.state.result 
                });
            }

        }

            render() {
                return (
                    <div>
                        <Header />
                        <div>
                            <p>test successful</p>
                            <p>{this.state.result}</p>
                        </div>
                        <Footer />
                    </div>
                );
            }
        }


        export default Completed;