我有新的反应,我很难将一本书的数据从列表中删除,通过axios'得到方法。 我认为这与网址有关,但我无法解决问题。
这是我的代码:
export function loadBook(book){
return dispatch => {
return axios.get('http://localhost:3000/api/books/book/:id').then(book => {
dispatch(loadBookSuccess(book.data));
console.log('through!');
}).catch(error => {
console.log('error');
});
};
}
//also tried this
export function loadBook(id){
return dispatch => {
return axios.get('http://localhost:3000/api/books/book/' + {id}).then(book => {
dispatch(loadBookSuccess(book.data));
console.log('through!');
}).catch(error => {
console.log('error');
});
};
}

包含指向每本书的变量链接的Html代码
<div className="container">
<h3><Link to={'/book/' + book._id}> {book.title}</Link></h3>
<h5>Author: {book.author.first_name + ' ' + book.author.family_name}</h5>
<h4>Summary: {book.summary}</h4>
<BookGenre genre={genre} />
</div>
&#13;
路线中的
链接:
<Route path="/book/:id" component={BookPage} />
&#13;
编辑:图书组件的代码
class BookPage extends React.Component{
render(){
const book = this.props;
const genre = book.genre;
console.log(book);
return(
<div>
<div>
<h3> {book.title}</h3>
<h5>Author: {book.author.first_name + ' ' + book.author.family_name}</h5>
<h4>Summary: {book.summary}</h4>
<BookGenre genre={genre} />
</div>
</div>
);
}
}
BookPage.propTypes = {
book: PropTypes.object.isRequired
};
//setting the book with mapStateToProps
function mapStateToProps (state, ownProps){
let book = {title: '', author: '', summary: '', isbn: '', genre: []};
const bookid = ownProps.params._id;
if(state.books.length > 0){
book = Object.assign({}, state.books.find(book => book.id));
}
return {
book: book
};
}
function mapDispatchToProps (dispatch) {
return {
actions: bindActionCreators(loadBook, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(BookPage);
&#13;
答案 0 :(得分:3)
而不是这样做: -
axios.get('http://localhost:3000/api/books/book/' + {id})
你应该这样做: -
axios.get(`http://localhost:3000/api/books/book/${id}`)
所以 action.js 可能如下所示: -
export function loadBook(id){
const request = axios.get(`http://localhost:3000/api/books/book/${id}`);
return dispatch => {
request.then(book => {
dispatch(loadBookSuccess(book.data));
}).catch(error => {
console.log('error');
})
};
}
由于id,你已经传递它似乎是一个字符串,所以它可以使用 ES6模板字符串连接,并确保你用反引号包装你的字符串。或者您可以+
运算符执行此操作,同时确保将id
作为参数传递到loadbook
函数中,以便将其加入您的网址。
答案 1 :(得分:0)
找出解决这个问题的方法。 我的错误是我没有发送项目的ID以及api调用。 使用componentDidMount并从url params发送动态id为我解决了这个问题。
谢谢你,@ Vinit Raj,我想我当时太过新秀了。