ReactJS表单应用程序：如何阻止父组件重新渲染？ /使用redux共享状态的正确方法

Question

我正在使用React.js编写一个表单应用程序作为我的第一个应用程序，所以我不是一个经验丰富的开发人员。

所以表单的流程是这样的： 1）有3种主要形式（我将其分为3页） 2）提交表格只会出现在最后一页。所以我使用redux方法来共享状态。 3）第一页和第二页具有嵌套形式。

我目前遇到的问题是第一页和第二页，当我想在组件（表单）中渲染另一个组件（嵌套表单）时，所有组件状态都将刷新，我在下面得到了这个错误：

index.js:2178 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
in form (at PersonalDetail.js:31)
in PersonalDetail (created by Connect(PersonalDetail))
in Connect(PersonalDetail) (created by Route)
in Route (at App.js:20)
in Switch (at App.js:17)
in div (created by Jumbotron)
in Jumbotron (at App.js:16)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:15)
in App (at index.js:18)
in Provider (at index.js:17)

下面是我的PersonalDetail.js，它位于第一个表格（第一页）。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { formUpdate } from '../actions';

import Working from './Working';

class PersonalDetail extends Component {
    renderWorkingForm(){
        if(this.props.working) {
            return (
                <Working />
                /*
                <div className="form-group">
                    <label>Tax Number:</label>
                    <input 
                        type="number" 
                        value={this.props.tax} 
                        onChange={event => this.props.formUpdate({ prop: 'tax', value: event.target.value })} 
                    />
                </div>
                */
            );
        }

        return;
    }

    render() {
        return (
            <form >
                <div className="form-group">
                    <label>Fullname:</label>
                    <input 
                        className="form-control" 
                        type="text" 
                        value={this.props.name}
                        onChange={event => this.props.formUpdate({ prop: 'name', value: event.target.value })}
                    />
                </div>
                <div className="form-group">
                    <label>IC:</label>
                    <input 
                        className="form-control" 
                        type="text" 
                        value={this.props.ic}
                        onChange={event => this.props.formUpdate({ prop: 'ic', value: event.target.value })}
                    />
                </div>
                <div className="form-group">
                    <label>Nationality:</label>
                    <input 
                        className="form-control" 
                        type="text" 
                        value={this.props.nationality}
                        onChange={event => this.props.formUpdate({ prop: 'nationality', value: event.target.value })}
                    />
                </div>
                <div className="form-group">
                    <label>Are you currently working:</label>
                    <button onClick={() => this.props.formUpdate({ prop: 'working', value: true })}>Yes</button>
                    <button onClick={() => this.prop.formUpdate({ prop: 'working', value: false })}>No</button>
                </div>
                {this.renderWorkingForm}
                <Link to="/kin" className="btn btn-primary">Next</Link>
            </form>
            
        );
    }
}

const mapStateToProps = (state) => {
    const { name, ic, nationality, working, tax } = state.form;

    return { name, ic, nationality, working, tax };
}

export default connect(mapStateToProps, { formUpdate })(PersonalDetail);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

以下是我的工作组件类：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { formUpdate } from '../actions';

class Working extends Component {
    render() {
        return (
            <form>
                <div className="form-group">
                    <label>Tax Number:</label>
                    <input type="number"  value={this.props.tax} onChange={event => this.props.formUpdate({ 
                        prop: 'tax', value: event.target.value
                    })} />
                </div>
            </form>
        )
    }
}

const mapStateToProps = (state) => {
    const { tax } = state.form;

    return { tax };
}

export default connect(mapStateToProps, { formUpdate })(Working);