javascript - React : first time,未定义错误，但重新加载后成功

Question

我使用react、redux、redux-thunk、react-router-dom v4制作Web应用程序。

我创建了一个加载帖子的组件。

但是一开始，该值是未定义的，当我重新加载页面时，该值已成功加载。

为什么值一开始就没有进来？

应用程序.js:

...
{this.props.posts.map((post, index) => (
          <div key={index} style={{ border: "1px solid black" }}>
            <Link to={`/post/${post._id}`}>{post.title}</Link>
            <br />
            <span>{post.content}</span>
            <br />
            <span>{post.author}</span>
          </div>
        ))}
...

Post.js:

class Post extends Component {
  componentDidMount() {
    this.props.getPostDetailFetch(this.props.match.params.id);
  }

  render() {
    return (
      <Container>
        <Row>
          <Col xs="12">
            <h1>{this.props.post.title}</h1>
          </Col>
          <Col xs="12">
            <h3>{this.props.post.author}</h3>
           <Col xs="12">
            <p>{this.props.post.content}</p>
           </Col>
        </Row>
      </Container>
       );
    }
  }
 ...

index.js:

import { Router, Route } from "react-router-dom";
import history from "./history";

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
     <div>
        <Route exact path="/" component={App} />
        <Route path="/post/:id" component={Post} />
     </div>
    </Router>
  </Provider>,
   document.getElementById("root")
  );

Answer 1

它不起作用，因为您正在以异步方式获取帖子。因此，在第一个渲染中它们是未定义的。只需使用条件渲染:

...
{!!this.props.posts.length && this.props.posts.map((post, index) => (
          <div key={index} style={{ border: "1px solid black" }}>
            <Link to={`/post/${post._id}`}>{post.title}</Link>
            <br />
            <span>{post.content}</span>
            <br />
            <span>{post.author}</span>
          </div>
        ))}
...

Post.js 也存在同样的问题。因此，您还应该在那里进行条件渲染。

render() {
    if ( !this.props.post) {
        return <div>No post!</div>
    }

    return (
      <Container>
        <Row>
          <Col xs="12">
            <h1>{this.props.post.title}</h1>
          </Col>
          <Col xs="12">
            <h3>{this.props.post.author}</h3>
           <Col xs="12">
            <p>{this.props.post.content}</p>
           </Col>
        </Row>
      </Container>
       );
    }

此外，如果帖子详细信息与帖子数组中的帖子详细信息没有不同，我认为您不需要在此处再次进行获取。只需更改您的逻辑并使用 id 以某种方式从商店获取帖子详细信息。