私の状態変数には、レンダリングされるオブジェクトの配列が含まれています（各オブジェクトには、username、user_DP、imageUrl、captionが含まれています）。ただし、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}
このエラーを取り除くのを助けてください、それは私を大いに助けます。
あなた<Navbar />とmap()持つ<Post>sが単一ノード内にある必要があります。デザインを壊さない場合React.Fragmentは、それらを使用またはラップする<div>ことができます。
React.Fragmentコンポーネントを使用すると、追加のDOM要素を作成せずにrender（）メソッドで複数の要素を返すことができます。
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>
);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加