如何在使用React Redux和Rails api删除项目时更新状态

Question

我正试图在我的应用程序中创建一个删除功能，该功能似乎可以很好地从后端删除对象，但不能在前端删除。

以下是我如何构建我的项目：

在actions/deleteJournal.js中

export const deleteJournal = (journal) => {
return dispatch => {
fetch(`http://localhost:3001/journals/${journal.id}` , {
method: "DELETE" })
.then(resp => resp.json())
.then(journal => { dispatch({ type: "DELETE_JOURNAL", journal })
})
}
}

在减速器/日志中Reducer.js

const initialState = {
journals: [],
loading: true
}
const journalsReducer = (state=initialState, action) => {
switch(action.type) {
case "LOADING":
return {
...state,
loading: true
}
case "SET_JOURNALS":
return {
...state,
loading: false,
journals: action.journals
}
case "ADD_JOURNAL":
return {
...state,
journals: [...state.journals, action.journal],
}
case 'DELETE_JOURNAL':
return { 
journals: state.journals.filter(todo => todo.id !== action.id),
...state    

}

default: 
return state;
}
}
export default journalsReducer

组件/List.js中的

import React, { Component } from 'react'
import { connect } from 'react-redux'
import Journal from './Journal'
import { deleteJournal } from '../actions/getJournals'
class ListFiltered extends Component {

render() {
const journals = this.props.journals.map( journal => journal.locationId === this.props.locationId && <Journal key={journal.id} title={journal.title} content={journal.content} id={journal.id} deleteJournal={this.props.deleteJournal} />)
return (
<div>
{journals}
<p></p>
</div>
)
}
}
const mapStateToProps = state => {
return {
journals: state.journals
}
}
export default connect(mapStateToProps, {deleteJournal})(ListFiltered)

在components/Journal.js中

class Journal extends Component {

render() {
const { id, title, content } = this.props;

return (

<div>
<ul>
<li>
<h3>{ title } </h3>

<p> { content }</p>   <button onClick={() => this.props.deleteJournal(this.props) }>Delete</button>



</li>
</ul>

</div>
)
}
}
export default Journal

所以这似乎给了我一个错误"未捕获(承诺中(SyntaxError：JSON输入意外结束在deleteJournal.js:48">我检查了我的服务器，它似乎正在从那里删除它，但前端什么都没有，当我刷新时，项目被删除了。

我该怎么做才能自动从前端删除项目？

Answer 1

我怀疑问题可能与您的线路有关

.then(resp => resp.json())

当您发出DELETE请求时，响应的主体是什么？如果它不是一个有效的JSON对象，那么JavaScript会抛出您看到的错误。

由于您根本没有使用解析后的JSON，因此可以设想删除这一行：

export const deleteJournal = (journal) => {
return dispatch => {
fetch(`http://localhost:3001/journals/${journal.id}` , {
method: "DELETE" })
.then(journal => { dispatch({ type: "DELETE_JOURNAL", journal })
})
}
}

但是您可能需要检查DELETE方法是否已成功执行。

如何做到这一点取决于您和您的Rails API，但我通常希望在成功删除某些内容时，响应的HTTP状态在2xx范围内，而在无法删除某些内容(例如，ID无法识别，或者存在依赖性问题，这意味着删除请求被拒绝(时，响应会在4xx范围内。不过，这感觉超出了这个问题的范围。