Question

（这里仅是我的第三篇文章，所以请原谅任何公然的问题）。

以下是我的Unit组件，它是Course组件的子级（courses has_many单位）。

import React from 'react';
import { connect } from 'react-redux';
import { getUnits, addUnit, updateUnit } from '../reducers/units';
import { Container, Header, Form } from 'semantic-ui-react';

class Units extends React.Component {

  initialState = { name: ''}

  state = { ...this.initialState }

  componentDidUpdate(prevProps) {
    const { dispatch, course } = this.props
    if (prevProps.course.id !== course.id)
      dispatch(getUnits(course.id))
  }

  handleSubmit = (e) => {
    debugger 
    e.preventDefault()
    debugger 
    const unit = this.state 
    const { dispatch } = this.props
    if (unit.id) {
      debugger 
      dispatch(updateUnit(unit))
    } else {
      debugger 
      dispatch(addUnit(unit))
      this.setState({ ...this.initialState })
    }
  }

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: value })
  }

  units = () => {
    return this.props.units.map( (unit, i) => 
      <ul key={i}>
        <li key={unit.id}> {unit.name}</li>
        <button>Edit Module Name</button> 
        <button>Delete Module</button> 
      </ul> 
    )
  }

  render() {
    const { name } = this.state 
    return (
      <Container>
        <Header as="h3" textAlign="center">Modules</Header>
        { this.units() }
        <button>Add a Module</button> 
        <Form onSubmit={this.handleSubmit}>
        <Form.Input 
          name="name"
          placeholder="name"
          value={name}
          onChange={this.handleChange}
          label="name"
          required
          />
        </Form> 
      </Container>
    )
  }
}
const mapStateToProps = (state) => {
  return { units: state.units, course: state.course }
}

export default connect(mapStateToProps)(Units);

以下是它的减速器：

import axios from 'axios';
import { setFlash } from './flash'
import { setHeaders } from './headers'
import { setCourse } from './course'

const GET_UNITS = 'GET_UNITS'; 
const ADD_UNIT = 'ADD_UNIT'; 
const UPDATE_UNIT = 'UPDATE_UNIT'; 

export const getUnits = (course) => {
  return(dispatch) => {
    axios.get(`/api/courses/${course}/units`)
      .then( res => {
        dispatch({ type: GET_UNITS, units: res.data, headers: res.headers })
      })
  }
}

export const addUnit = (course) => {
  return (dispatch) => {
    debugger 
    axios.post(`/api/courses/${course}/units`)
      .then ( res => {
        dispatch({ type: ADD_UNIT, unit: res.data })
        const { headers } = res
        dispatch(setHeaders(headers))
        dispatch(setFlash('Unit added successfully!', 'green'))
      })
      .catch( (err) =>  dispatch(setFlash('Failed to add unit.', 'red')) )
  }
}

export const updateUnit = (course) => {
  return (dispatch, getState) => {
    const courseState = getState().course
    axios.put(`/api/courses/${course.id}/units`, { course })
      .then( ({ data, headers }) => {
        dispatch({ type: UPDATE_UNIT, course: data, headers })
        dispatch(setCourse({...courseState, ...data}))
        dispatch(setFlash('Unit has been updated', 'green'))
      })
      .catch( e => {
        dispatch(setHeaders(e.headers))
        dispatch(setFlash(e.errors, 'red'))
      })
  }
}

export default (state = [], action) => {
  switch (action.type) {
    case GET_UNITS:
      return action.units;
    case ADD_UNIT:
      return [action.unit, ...state]
    case UPDATE_UNIT:
    return state.map( c => {
      if ( c.id === action.unit.id )
        return action.unit
      return c
    })
    default:
      return state;
  }
};

注意：我的reducer正在为我的getUnits工作并正确呈现这些单位。

还请注意：当我尝试提交新单元时，它将忽略我的handleSubmit中的所有调试器和我的addUnits中的调试器（在reducer中），但是会以某种方式呈现“无法添加单元”的闪烁消息。

然后，控制台记录该帖子标题中看到的错误。

我耙平了路线，我的帖子肯定应该照原样去。

我尝试以各种方式传递单元和课程，而对错误没有任何更改。

如何在不击中任何调试器的情况下击中Flash消息？
如何解决此[object％20Object]问题？

提前谢谢！

Answer 1

下一行中的变量course

axios.get(`/api/courses/${course}/units`)

是一个对象。当您尝试将对象转换为JavaScript中的字符串时，将产生[object Object]。然后将空格转换为URL请求的%20。

我将看一下course变量的内容。可能，URL中实际需要的是course中的内容。也许course.id。

如果仍然遇到问题，则需要说明/courses/和/units之间的URL中应该包含什么值以及该数据的位置。

Answer 2

您正在使用handleSubmit中等于this.state的参数调用addUnit和updateUnit

const unit = this.state
addUnit(unit)

由于this.state是object类型的，因此它被字符串连接为object％20object。

getUnit可以正常工作，因为在那里传递的参数来自道具课程。检查handleSubmit中的状态值。

POST http：// localhost：3000 / api / courses / [object％20Object] / units 404（未找到）

2 个答案: