javascript - POST http://localhost:3000/api/courses/[object％20Object]/units 404(未找到)

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

以下是我的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;
  }
};

注意：我的减速器正在为我的getUnits工作，并正确渲染这些单位。

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

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

我刮了一下路线，我的帖子肯定应该照原样走。

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


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


提前致谢！

最佳答案

下一行的变量course

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

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

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

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

关于javascript - POST http://localhost:3000/api/courses/[object％20Object]/units 404(未找到)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51273931/