获取不返回react中的数据

时间:2017-10-05 12:23:03

标签: node.js reactjs

我有新的反应,我很难将一本书的数据从列表中删除,通过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;
&#13;
&#13;

路线中的

链接:

&#13;
&#13;
<Route path="/book/:id" component={BookPage} />
&#13;
&#13;
&#13;

编辑:图书组件的代码

&#13;
&#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;
&#13;
&#13;

2 个答案:

答案 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,我想我当时太过新秀了。