Question

这里onShowFriends是我的点击事件，用于将设置状态标志处理为true，如果这是真的我想要显示组件，我在朋友减速器中设置为真...哪个是开火而且我＆＃39 ;我能够在设置标志组件后再次重新加载并且状态再次设置回初始状态时设置标志我该如何解决这个问题我是新的反应和还原 https://github.com/kumar155/ReactRedux-Issue1

这是我的减速机：

var initialState = {
     status: false,
     friends: [
    { id: 1, name: 'satish', status: true },
    { id: 2, name: 'satish1', status: true },
    { id: 3, name: 'satish2', status: true },
    { id: 4, name: 'satish3', status: true },
    { id: 5, name: 'satish4', status: true }]

  }
 export const FriendsReducer = (state = initialState, action) => {
        switch (action.type) {
            case Types.ADD_FRIEND:
                return Object.assign({}, state, { friends: addFriend(state.friends, action) });
            case Types.GET_LIST:
                return Object.assign({},state,state.status = action.isShow);
            default:
                return state;
        }
    }
    export default FriendsReducer;

组件：

     export class Add_A_Friend extends Component {
            constructor(state) {
                super();
                this.props = state;
            }

            render() {
                let Fname, Fcity;
                return (
                    <div className="container">
                        <form className="form-signin">
                            <br /> <br /> <br />
                            <input type="text" className="form-control" placeholder="Friend Name" ref={x => Fname = x} />
                            <br />
                            <input type="text" className="form-control" placeholder="City Name" ref={x => Fcity = x} />
                            <br />
                            <button className="btn btn-primary" style={{ marginRight: 10 }} onClick={() => this.props.onAddFriend(Fname, Fcity)}>Add Friend</button>

                            <button className="btn btn-warning" style={{ float: 'right' }} onClick={() => this.props.onClear()}>Clear</button>

                            <button className="btn btn-info" onClick={() => this.props.onCheck(Fname)}>Check Name's</button>

                            <button className="btn btn-success" style={{ marginLeft: 10 }} onClick={() => this.props.onShowFriends(true)}>Show My Friends List</button>

                            {this.props.state.FriendsReducer.status && <Friends_List />}

                        </form>
                    </div>
                );
            }
        }

        Add_A_Friend.PropTypes = {
            onAddFriend: PropTypes.func.isRequired,
            onClear: PropTypes.func.isRequired,
            onCheck: PropTypes.func.isRequired
        }

        const mapPropsToState = (state) => {
            return {
                state: state
            }
        };

        export const mapDispatchToProps = (dispatch) => {
            return {
                onAddFriend: (Fname, Fcity) => {
                    dispatch(AddFriend(Fname.value, Fcity.value));
                },
                onClear: () => {
                    dispatch(ClearFriend());
                },
                onCheck: () => {
                    dispatch({ type: Types.CHECK_FRINDS });
                },
                onShowFriends: (isShow) => {
                    return dispatch({ type: Types.GET_LIST, isShow });
                }
            }
        };
        function AddFriend(name, city) {
            return {
                type: Types.ADD_FRIEND,
                name, city
            }
        }
        function ClearFriend() {
            return { type: Types.CLEAR }
        }

        Add_A_Friend = connect(mapPropsToState, mapDispatchToProps)(Add_A_Friend);

        export default Add_A_Friend;

Answer 1

如果页面正在重新加载，那么在点击按钮时似乎正在提交表单。你需要添加它来防止它

onClick={(e) => { e.preventDefault(); this.props.onShowFriends(true)}}

在更新状态之后，在react-redux中调用组件两次，这导致再次获得初始状态而不是更新状态

1 个答案: