无法更正 Unexpected token, expected ":" in reactjs 的错误

Question

我的状态变量包含一个对象数组（其中每个对象都包含用户名、user_DP、imageUrl、标题），这些对象将被渲染，但是在使用 map() 渲染时会出现一个我无法解决的错误。状态变量的例子：this.state = {      route: 'signin',      postDetails: [...]    };我的 render() 看起来像render(){    const {route, postDetails} = this.state;    return (      <div className="App">      {        route === 'home' ?          <Navbar/>            {              postDetails.map((post,index)=>{                return(<Post                         key = {index}                         username = {post.username}                         user_DP = {post.user_DP}                        imageUrl = {post.imageUrl}                        caption = {post.caption}                      />);                    })            }          :          (            route === 'signin'?              <Signin onRouteChange = {this.onRouteChange}/>              :              <Signup onRouteChange = {this.onRouteChange}/>          )      }      </div>    );  }我收到这样的错误Syntax error: Unexpected token, expected ":" (44:13)  42 |         route === 'home' ?  43 |           <Navbar/>> 44 |             {     |             ^  45 |               postDetails.map((post,index)=>{  46 |                 return(<Post   47 |                         key = {index}请帮助消除此错误，这将对我有很大帮助。

Answer 1

您的<Navbar />和map()with <Post>s 必须在单个节点内。您可以在不破坏您的设计的情况下使用React.Fragment或包装它们：<div>

React.Fragment 组件允许您在 render() 方法中返回多个元素，而无需创建额外的 DOM 元素。

function render() {

  const { route, postDetails } = this.state;

  return (

    <div className="App">

      {route === "home" ? (

        <> {/* <- shorthand for <React.Fragment> */}

          <Navbar />

          {postDetails.map((post, index) => {

            return (

              <Post

                key={index}

                username={post.username}

                user_DP={post.user_DP}

                imageUrl={post.imageUrl}

                caption={post.caption}

              />

            );

          })}

        </> {/* <- shorthand for </React.Fragment> */}

      ) : route === "signin" ? (

        <Signin onRouteChange={this.onRouteChange} />

      ) : (

        <Signup onRouteChange={this.onRouteChange} />

      )}

    </div>

  );

}