Я работаю над простым CRUD с реагировать и реагировать на избыточность и у меня проблемы с POST на стороне клиента BoardList. js
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getBoards, deleteBoard, addBoard } from "../../actions/boards"
export class BoardList extends Component {
static propTypes = {
boards: PropTypes.array.isRequired,
getBoards: PropTypes.func.isRequired,
deleteBoard: PropTypes.func.isRequired,
addBoard: PropTypes.func.isRequired
}
componentDidMount() {
this.props.getBoards();
}
shouldComponentUpdate(nextProps, nextState){
return this.props.boards !== nextProps.boards
}
render(){
return (
<Fragment>
<h2>Boards</h2>
<table className="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Author</th>
<th>Title</th>
<th>Created</th>
<th>Updated</th>
<th />
</tr>
</thead>
<tbody>
{this.props.boards.length > 0 && this.props.boards.map(board => (
<tr key={board.id}>
// Uncaught TypeError: Cannot read property 'id' of undefined
<td>{board.id}</td>
<td>{board.author}</td>
<td>{board.title}</td>
<td>{board.created}</td>
<td>{board.updated}</td>
<td>
<button
className="btn btn-danger btn-sm"
onClick={this.props.deleteBoard.bind(this, board.id)}
>
Delete</button>
</td>
</tr>
))}
</tbody>
</table>
</Fragment>
)
}
}
const mapStateToProps = state => ({
boards: state.boards.boards,
})
export default connect(mapStateToProps, {getBoards, deleteBoard, addBoard})(BoardList)
редукторы / доски. js
import { GET_BOARDS, DELETE_BOARD, ADD_BOARD } from "../actions/types.js";
const initialState = {
boards : []
}
export default function(state=initialState, action) {
switch (action.type) {
case GET_BOARDS:
return {
...state,
boards: action.payload
}
case DELETE_BOARD:
return {
...state,
boards:state.boards.filter(board => board.id !== action.payload)
}
case ADD_BOARD:
return {
...state,
boards:[...state.boards, action.payload]
}
default:
return state;
}
}
действия / доски. js
export const addBoard = board => (dispatch, getState) => {
const token = getState().users.token;
const config = {
headers: {
'Content-Type': undefined //I suspect this is wrong
}
if(token){
config.headers["Authroization"] = `Token ${token}`
}
axios
.post("api/boards/",board, tokenConfig(getState))
.then(res=> {
dispatch(createMessage({ addBoard: "Board added"}));
dispatch({
type:ADD_BOARD,
payload: res.data
})
})
.catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
}
Я знаю, что это сообщение об ошибке относится к django rest framework, однако я могу отправить его через Почтальон. Поэтому я думаю, что это моя проблема Content-Type
. (Если я ошибаюсь, пожалуйста, исправьте меня) В первый раз я подумал, что django pass framework pass json, поэтому я использовал application/json
. затем я получил The submitted data was not a file. Check the encoding type on the form.
Я также использовал multipart/form-data
и undefined
тогда я получаю Multipart form parse error - Invalid boundary in multipart: None
ошибку. Как я могу справиться с этой проблемой?