Javascript 反应：第一次，未定义错误，但在重新加载后，它成功了

我用react、redux、redux thunk、react路由器dom v4制作web应用程序

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

但在开始时，该值未定义，并且在重新加载页面时成功加载了该值

为什么一开始就没有价值

App.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>
        ))}
...

。。。
{this.props.posts.map（（post，index）=>(
{post.title}


{post.content}


{post.author}
))}
...

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>
       );
    }
  }
 ...

类Post扩展组件{
componentDidMount（）{
this.props.getPostDetailFetch（this.props.match.params.id）；
}
render（）{
返回(
{this.props.post.title}
{this.props.post.author}
{this.props.post.content}

);
}
}
...

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")
  );

从“react Router dom”导入{Router，Route}；
从“/history”导入历史记录；
ReactDOM.render(
,
document.getElementById（“根”）
);

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

...
{!!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细节与posts数组中的相同，那么我认为您不需要在这里再次进行获取。只需更改您的逻辑，并使用

id

以某种方式从存储中获取帖子详细信息。

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

...
{!!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细节与posts数组中的相同，那么我认为您不需要在这里再次进行获取。只需更改您的逻辑，并使用

id

以某种方式从存储中获取帖子详细信息。

此.props.posts

未定义？@Justcode是。第一次未定义。

此.props.posts

未定义？@Justcode是。它第一次未定义，但第一次仍然未定义。重新加载后，它会工作。如果你只想获得帖子，为什么还要重新加载？第一次打开此页面时会发生什么情况？在尝试此操作之前，您是否正在对后端执行任何

POST

操作？此外，您从何处获得此

undefined

错误

App.js

或

Post.js

？@devserkan错误为“TypeError:无法读取未定义的属性'title'。而且，Post.js是错误组件。此外，console.log（this.props.post）未定义。localhost/api/post/id已成功加载数据。但第一次仍然未定义。重新加载后，它会工作。如果你只想获得帖子，为什么还要重新加载？第一次打开此页面时会发生什么情况？在尝试此操作之前，您是否正在对后端执行任何

POST

操作？此外，您从何处获得此

undefined

错误

App.js

或

Post.js

？@devserkan错误为“TypeError:无法读取未定义的属性'title'。而且，Post.js是错误组件。此外，console.log（this.props.post）未定义。localhost/api/post/id已成功加载数据。