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;

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

1 个答案: