Question

我在我的网络应用中使用react和redux。这是一个简单的应用程序，它有4个组件，一个减速器和3个动作。在我添加一个新的条目列表后，反应渲染列表的组件（listItem），然后重新渲染整个应用程序。渲染一个组件后重新渲染整个应用程序的原因是什么？

更新

App容器：

class App extends Component {

    static propTypes = {
        groups: PropTypes.array.isRequired,
        actions: PropTypes.object.isRequired
    };

    render() {
        return (<div>
            <Header addGroup={this.props.actions.addGroup} />
            <List groups={this.props.groups} />
        </div>
        );
    }
}

function mapStateToProps(state) {
    return { groups: state.groups };
}

function mapDispatchToProps(dispatch) {
    return { actions: bindActionCreators(AppActions, dispatch) };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Reduser：

export default function groupDiseases(state = initialState, action){
    switch (action.type) {
        case ADD_GROUP:
            return [
            {
                id: '',
                name: action.name
            },
            ...state
        ];

        case DELETE_GROUP:
             return state.filter(group =>
                group.id !== action.id
            );

        case EDIT_GROUP:
            return state.map(group => (group.id === action.id ? { id: action.id, name: action.name } : group));

        default:
            return state;
    }
}

组件：

export default class Add extends Component {

    static propTypes = {
        addGroup: PropTypes.func.isRequired
    }

    componentDidMount() {
        this.textInput.focus();
    }

    handleAdd = () => {
       const name = this.textInput.value.trim();
        if (name.length !== 0) {
            this.props.addGroup(name);
            this.textInput.value = '';
        }
    }

    render() {
        return (
        <form className="add_form">
            <input
                type="text"
                className="add__name"
                defaultValue=""
                ref={(input) => this.textInput = input}
                placeholder="Name" />
            <button
                className="add__btn"
                ref="add_button"
                onClick={this.handleAdd}>
                Add
            </button>
        </form>
       );
   }
}

export default class ListGroups extends Component {

    static propTypes = {
        groups: PropTypes.array.isRequired
    };

    render() {
        let data = this.props.groups;
        let groupTemplate = <div> Группы отсутствуют. </div>;
        if (data.length) {
            groupTemplate = data.map((item, index) => {
                return (
                <div key={index}>
                    <Item item={item} />
                </div>
                );
           });
       }

       return (
        <div className="groups">
            {groupTemplate}
            <strong
                className={'group__count ' + (data.length > 0 ? '' : 'none')}>
                Всего групп: {data.length}
            </strong>
        </div>
        );
    }
}

Answer 1

这可能是因为您让<form>继续其默认行为，即提交到目标action。看一下按钮的w3c规范：

http://w3c.github.io/html-reference/button.html

具体来说，没有type属性的按钮将默认提交。所以你的按钮告诉表单提交，目标是当前页面，因为没有提供。在handleAdd方法中，您可以执行以下操作：

handleAdd = (event) => {
   event.preventDefault(); // prevent default form submission behavior
   const name = this.textInput.value.trim();
    if (name.length !== 0) {
        this.props.addGroup(name);
        this.textInput.value = '';
    }
}

或者您可以修改按钮以type="button"。

渲染组件

1 个答案: