Question

//routes
const AppRoute = () => {
    return (
      <BrowserRouter>
        <div className="container">
          <Switch>
            <Route path='/' component={BooksList} exact/>
            <Route path='/create' component={BookCreate}/>
            <Route path='/books/:id' component={BookShow}/>
          </Switch>
        </div>
      </BrowserRouter>
    );
};
export default AppRoute;

//store 
const store = createStore(reducers, applyMiddleware(Promise));
ReactDOM.render(
  <Provider store={store}>
    <AppRoute/>
  </Provider>,
  document.getElementById("root")
);

我使用react和redux。我创建了一个BookShow组件来显示一本书的数据。数据加载正确，但当我刷新页面时，我收到此错误：类型错误：无法读取未定义的属性“title”，并且未定义孔状态。

为什么会发生这种情况，我该如何防止它发生？这是我的代码

import React from 'react';
import {connect} from 'react-redux'

const BookShow = props => {
  if(!props){
    return <div>loading...</div>
  }
  return (
    <div>
      <h2 className="text-center">{props.book.title}</h2>
      <p className="">{props.book.body}</p>
      {console.log(props)}
    </div>
  );
};

const mapStateToProps = (state, props) => {
  return {
    book: state.books.find((book) => {
      return book.id === props.match.params.id
    })
  }
};
export default connect(mapStateToProps)(BookShow);

Answer 1

BookShow是一个无状态组件，试着让它成为一个类，

import React, { Component } from 'react';

export default class BookShow extends Component {
  render() {
    return (
      <div>
your code...
      </div>
    );
  }
}

Answer 2

import {withRouter} from 'react-router-dom';

export default withRouter(connect(mapStateToProps)(BookShow));

当您从homePage开始然后导航到某本书时，您可以使用props.match.params.id，但在刷新页面时您无法使用。尝试使用withRouter来查看它是否能解决您的问题。

Answer 3

我还没有测试过！试试吧，让我知道。

import React from 'react';
import {connect} from 'react-redux'

    class BookShow extends React.Component{
        constructor(props, context) {
            super(props, context);
            this.state = {
                book: {}
            }
        }


        componentWillMount(){
            const { match: { params }, books } = this.props;
            this.state.book = books.find((book) => {
                return book.id === params.id
            });
        }

        render(){
            const { book } = this.props;

            if(!props){
                return <div>loading...</div>
            }

            return (
                <div>
                  <h2 className="text-center">{book.title}</h2>
                  <p className="">{book.body}</p>
                </div>
              );
        }

    }

    const mapStateToProps = (state) => {
      return {
        books: state.books
      }
    };
    export default connect(mapStateToProps)(BookShow);

为什么刷新页面状态未定义？

3 个答案: