Question

我对响应redux非常陌生。在mapDispachToProps内部的onChangeHandler上遇到一些问题。

class Filterfeeds extends Component {
    checkeboxChangeHandeler = (event) => {
        console.log(this.state.viewScheduledPosts)
        let tempCheckval = !this.state.viewScheduledPosts;
        this.setState({
            viewScheduledPosts: tempCheckval
        });
    }
    render() {

        return (
            <React.Fragment>
                <div className='shaded-border-box'>
                    <TitleHeader title="Filter Feeed" style={{ paddingTop: "20px", fontSize: "18px" }} />
                    <div className="inline-items">
                        <div onChange={(e)=>this.props.onLableTribeChange(e)} style={{ marginTop: "5px", display: "flex", flexWrap: "nowrap" }}>
                            <input type="radio" name="labelTribe" defaultChecked value="label" /> Label
                            <input type="radio" name="labelTribe" style={{ marginLeft: "20px" }} value="tribe" /> Tribe
                        </div>
                        <div style={{ display: "flex" }}>
                            <div style={{ marginLeft: "20px" }}>
                                <select className='select-box-style' name="chooseLabel" onChange={(e)=>this.props.onSelectChange(e)}>
                                    <option value='' defaultChecked>Choose Label</option>
                                    {this.props.optionsArr.map((item) => {
                                        return <option value={item} key={item}>{item}</option>
                                    })
                                    }
                                </select>
                            </div>
                            <div className='space-bet-all' style={{ marginTop: "5px", marginLeft: "20px" }}>
                                <input type='checkbox' onChange={this.checkeboxChangeHandeler} />View scheduled posts
                            </div>
                        </div>
                    </div>
                    {this.props.labelTribe} - {this.props.chooseLabel} - 
                </div>
            </React.Fragment>
        )
    }
}


const mapStateToProps = (state) => {
    // console.log('state in project', state.project)
    return {
        labelTribe:state.project.labelTribe,
        optionsArr:state.project.optionsArr,
        chooseLabel:state.project.chooseLabel
    }
}

const mapDispachToProps = (dispach) => {
    console.log(dispach);
    return {
        onLableTribeChange : (event) => dispach({ type: 'UPDATE_EMP_NUMBER', payload: event.target.value }),
        onSelectChange: (event)=> dispach({type:'SELECT_LABLE_CHANGE',payload:event.target.value}),
    }
}

export default connect(mapStateToProps, mapDispachToProps)(Filterfeeds);

这是下面的myreducer.js文件

const initialState = {
    optionsArr: ["my Label", "my Tribe", "your tribe", "your label"],
    labelTribe: 'label',
    chooseLabel: '',
};


const projectreducer = (state = initialState, action) => {
    let newstate = { ...state };
    // console.log(newstate, action)
    console.log("Action type is==>", action.type)


    switch (action.type) {
        case ('UPDATE_EMP_NUMBER'):
            newstate.labelTribe = action.payload;
            break;
        case ('SELECT_LABLE_CHANGE'):
            newstate.chooseLabel = action.payload;
            break;
        default:
            return newstate;
    }
}
export default projectreducer;

当我尝试单击并更改cheakboxes值时，出现错误。

错误：给定操作“ UPDATE_EMP_NUMBER”，减速器“ project”返回未定义。要忽略动作，必须显式返回先前的状态。如果不希望该减速器保持任何值，则可以返回null而不是未定义。

这是我遇到的错误。

Answer 1

减速器中没有返回值，这是返回未定义的方式。始终在减速器中使用return来更改状态。

const projectreducer = (state = initialState, action) => {
  let newstate = { ...state };
  // console.log(newstate, action)
  console.log('Action type is==>', action.type);

  switch (action.type) {
    case 'UPDATE_EMP_NUMBER':
      newstate.labelTribe = action.payload;
      return newstate;
    case 'SELECT_LABLE_CHANGE':
      newstate.chooseLabel = action.payload;
      return newstate;
    default:
      return newstate;
  }
};

您还可以简化代码并直接返回新状态值，而无需重新分配状态。像这样尝试：

const projectreducer = (state = initialState, action) => {
  console.log('Action type is==>', action.type);

  switch (action.type) {
    case 'UPDATE_EMP_NUMBER':
      return {
        ...state,
        labelTribe: action.payload,
      };
    case 'SELECT_LABLE_CHANGE':
      return {
        ...state,
        chooseLabel: action.payload,
      };
    default:
      return state;
  }
};

mapDispachToProps在触发事件onChange函数时出现错误

1 个答案: