一开始，那个示例应用程序能够正常工作。我可以通过浏览器页面和数据库查看输入的数据。现在，我只能通过数据库查看数据，浏览器不显示数据，并且还出现了这个错误："Invalid attempt to spread non-iterable instance"。
以下是示例代码：
projectActions.js
import {FETCH_BOOK, CREATE_BOOK, DELETE_BOOK} from '../actions/projectTypes';
import axios from 'axios';
const apiUrl = 'http://api/books';
export const createBookSuccess = (data) => {
return {
type: CREATE_BOOK,
payload: {
_id: data._id,
author: data.author,
publication: data.publication,
publisher: data.publisher
}
}
};
export const deleteBookSuccess = _id => {
return {
type: DELETE_BOOK,
payload: {
_id
}
}
};
export const fetchBook = (books) => {
return {
type: FETCH_BOOK,
books
}
};
export const createBook = ({ author, publication, publisher }) => {
return (dispatch) => {
return axios.post(`${apiUrl}`, {author, publication, publisher})
.then(response => {
dispatch(createBookSuccess(response.data))
})
.catch(error => {
throw(error);
});
};
};
export const deleteBook = _id => {
return (dispatch) => {
return axios.delete(`${apiUrl}/${_id}`)
.then(response => {
dispatch(deleteBookSuccess(response.data))
})
.catch(error => {
throw(error);
});
};
};
export const fetchAllBooks = () => {
return (dispatch) => {
return axios.get(apiUrl)
.then(response => {
dispatch(fetchBook(response.data))
})
.catch(error => {
throw(error);
});
};
};
projectReducer.js
import {CREATE_BOOK, DELETE_BOOK, FETCH_BOOK} from '../actions/projectTypes';
const projectReducer = (state = [], action) => {
switch (action.types) {
case CREATE_BOOK:
return [...state, action.payload];
case DELETE_BOOK:
let afterDelete = state.filter(book => {
return book._id !== action.payload._id
});
return {
...state,
state: afterDelete
}
case FETCH_BOOK:
return action.books;
default:
return state;
}
}
export default projectReducer;
rootReducer.js
import books from './projectReducer';
import {combineReducers} from 'redux';
const rootReducer = combineReducers({
books: books
});
export default rootReducer;
书单元素.js
import React from 'react';
import {connect} from 'react-redux';
import BookList from '../components/bookList';
import {deleteBook} from '../store/actions/projectActions';
const BookListElement= ({books, deleteBook}) => {
if(!books.length) {
return (
<div>
No Books
</div>
)
}
return (
<div>
{books.map(book => {
return (
<BookList book={book} deleteBook={deleteBook} key={book._id} />
);
})}
</div>
);
}
const mapStateToProps = state => {
return {
books: state.books
};
};
const mapDispatchToProps = dispatch => {
return {
deleteBook: _id => {
dispatch(deleteBook(_id));
}
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(BookListElement);
bookList.js
import React from 'react';
const styles = {
borderBottom: '2px solid #eee',
background: '#fafafa',
margin: '.75rem auto',
padding: '.6rem 1rem',
maxWidth: '500px',
borderRadius: '7px'
};
const BookList = ({ book: { author, publication, publisher, _id }, deleteBook }) => {
return (
<div style={styles} key={_id}>
<h2>{author}</h2>
<p>{publication}</p>
<p>{publisher}</p>
<button className="btn waves-effect waves-light" type="submit" name="action" onClick={() => {deleteBook(_id)}}>
<i className="large material-icons">delete_forever</i>
</button>
</div>
);
};
export default BookList;
bookCreate.js
import React, {Component} from 'react';
class BookCreate extends Component {
state= {
author: '',
publication: '',
publisher: ''
}
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
});
}
handleSubmit = (e) => {
e.preventDefault();
this.props.createBook(this.state)
}
render() {
return (
<div className="container">
<form onSubmit={this.handleSubmit} className="white" autoComplete="off">
<h5 className="grey-text text-darken-3">Create New Book</h5>
<div className="input-field">
<label htmlFor="author">Author</label>
<input type="text" id="author" onChange={this.handleChange}/>
</div>
<div className="input-field">
<label htmlFor="publication">Publication</label>
<input type="text" id="publication" onChange={this.handleChange}/>
</div>
<div className="input-field">
<label htmlFor="publisher">Publisher</label>
<input type="text" id="publisher" onChange={this.handleChange}/>
</div>
<div className="input-field">
<button className="btn pink lighten-1 z-depth-0">Create</button>
</div>
</form>
</div>
)
}
}
export default BookCreate;
我多次检查了代码并阅读了一篇关于这个问题的旧帖子，但是作为一名初级开发人员，我没有找到任何解决方案。如果您能告诉我错过了什么，那就太好了。
编辑：将view.js文件添加为bookList.js。