Question

我正在尝试在react-redux中执行编辑操作。首先，我在索引页面上创建了一个按钮。 <Link to = {`/standups/${list.id}`}>Edit</Link> 当我单击此按钮时，它会转到编辑页面，但不存在数据。在我的编辑页面中，我有以下代码：

class StandupEdit extends Component {
  constructor(props){
    super(props);
    this.state = {
      standups: {
        user_id: this.props.standup ? this.props.standup.user_id : '',
        day: this.props.standup ? this.props.standup.day : '',
        work_done: this.props.standup ? this.props.standup.work_done : '',
        work_planned: this.props.standup ? this.props.standup.work_planned : '',
        blocker:  this.props.standup ? this.props.standup.blocker : ''
      },
      submitted: false
     };
  }
  handleSubmit = (event) => {
    event.preventDefault();
    const { standups } = this.state;
    const { dispatch } = this.props;
    if(standups.work_done && standups.work_planned && standups.blocker) {
      dispatch(addStandup(this.state.standups))
    } else {
      this.setState({
        submitted: true
      })
    }
  }
  componentWillReceiveProps = (nextProps) => {
    debugger
    this.setState({
      standups: {
        user_id: nextProps.user_id,
        day: nextProps.day,
        work_done: nextProps.work_done,
        work_planned: nextProps.work_planned,
        blocker:  nextProps.blocker
      }
    });
  }
  componentDidMount(){
    if(this.props.match.params.id){
      this.props.editStandup(this.props.match.params.id)
    }
  }

  handleChange = (event) => {
    const {name, value} = event.target;
    const {standups} = this.state;
    this.setState({
      standups: {
        ...standups,
        [name]: value
      }
    });
  }

  render() {
    const {standups, submitted, fireRedirect} = this.state
    return (
      <MuiThemeProvider theme={theme}>
          <Paper>
            <h1 className='header'>Add new standup</h1>
          </Paper>
          <Grid container spacing={16}>
              <form onSubmit={this.handleSubmit}>
                <Paper className='form'>
                  <TextField fullWidth name= "work_done"
                    value = {standups.work_done}
                    onChange= {this.handleChange}
                    type= "text"
                    placeholder= "What did you work on yesterday?"/>
                    {
                      submitted && !standups.work_done ?
                      <p>Work done is required</p> : ''
                    }
                </Paper>
                <Paper className='form'>
                  <TextField fullWidth name= "work_planned"
                    value = {standups.work_planned}
                    onChange= {this.handleChange}
                    type= "text"
                    placeholder= "What are you planning to work on today?"/>
                    {
                      submitted && !standups.work_planned ?
                      <p>Work planned is required</p> : ''
                    }
                </Paper>
                <Paper className='form'>
                  <TextField fullWidth name= "blocker"
                    value = {standups.blocker}
                    onChange= {this.handleChange}
                    type= "text"
                    placeholder= "Any impediments in your way?"/>
                    {
                      submitted && !standups.blocker ?
                      <p>Blocker required</p> : ''
                    }
                </Paper>
                <div className='button'>
                  <Button type="submit">Update</Button>
                </div>
              </form>
        </Grid>
      </MuiThemeProvider>
    );
  }
}
function mapStateToProps(state, props){
  if (props.match.params.id) {
  return {
    standup: state.standup.standups.findIndex(item => item.id === props.match.params.id)
  } 
}
  return {
    standup: null
  }
}
export default connect(mapStateToProps, {editStandup})(StandupEdit);

在行动中，我有这段代码：

export function editStandup(id) {
 return dispatch => {
   axios(`${ROOT_URL}/standups/${id}/${API_KEY}`, {
     headers: authHeader(),
     method: 'GET',
   }).then( response => {
       dispatch(success(response.data.standup))
   })
 }
 function success(response) {
   return {
      type: 'STANDUP_EDIT',
      payload: response
   }
 }
}

export function updateStandup(standup) {
 const request = axios({
   headers: authHeader(),
   method: 'PUT',
   url: `${ROOT_URL}/standups${API_KEY}`,
   data: standup
 })
 return {
   type: 'STANDUP_UPDATE',
   payload: request
 } 
}

我的reducer中有以下代码：

export function standup(state = {}, action){
switch (action.type) {
case 'STANDUP_UPDATE':
   return state.map(item => {
       if(item.id === action.payload.id)
         return
           standup: action.payload
       return item;
     });
   case 'STANDUP_EDIT':
   const index = state.standups.findIndex(item => item.id === action.payload.id);
   if (index > -1){
     return state.standups.map(item => {
       if(item.id === action.payload.id)
       return action.payload
     });
   }else{
     return
       standup: action.payload

   }

   default:
     return state;
 }
}

在我的reducer findIndex(item => item.id === action.payload.id);中，item => item.id包含错误item.id is undefined。

有人会帮我解决这个问题吗？

Answer 1

您没有正确更新reducer中的状态，最初未定义standups，您必须这样做。请检查以下相同的代码

export function standup(state = {standups: []}, action){
switch (action.type) {
case 'STANDUP_UPDATE': {
   const index = state.standups.findIndex(item => item.id === action.payload.id);
   return {
         ...state,
         standups: {
             ...state.standups.slice(0, index),
             action.payload,
             ...state.standups.slice(index + 1),
         }
    }
   }
   case 'STANDUP_EDIT':
    const index = state.standups.findIndex(item => item.id === action.payload.id);
   if (index > -1){
    return {
         ...state,
         standups: {
             ...state.standups.slice(0, index),
             action.payload,
             ...state.standups.slice(index + 1),
         }
    }
   }
   return {
     ...state,
     standups: {
         ...state.standups
         action.payload,
   }

   default:
     return state;
 }
}

您的组件名称也是StandupEdit，并且您将StandupNew与connect函数连接

export default connect(mapStateToProps, {editStandup})(StandupEdit);

在react-redux中编辑操作

1 个答案: