ReactJS 密钥问题
2019-04-24
45
我有一些 JSX 给我错误:
警告:列表中的每个子项都应具有唯一的“key”属性
我以前遇到过这种情况,但这次我看不出问题出在哪里。标记如下:
return isLoading ? (
<div className="App">
<div className="spinner"></div>
<div className="App loading">
<p><i>loading...</i></p>
</div>
</div>
)
: hasError ? (
<div className="App loading-error">
⚠ There is a network issue: Please try again later
</div>
)
:
(
<div className="App" key={`op - ${Math.floor(Math.random() * 110)}`}>
<>
{shelves.map(s => {
return (
books[s].map((b,i) => {
return (
<>
<h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
<div key={`${s}-${i}`}>
<Link to={`/book/${b.id}`}>
<img src={b.imageLinks.thumbnail} alt={b.title}></img>
</Link>
<Select className="sel-x"
placeholder="Choose a bookshelf..."
value={""}
options={shelvesN}
onChange={opt => changeShelf(opt.value,b.id)}
/>
</div>
</>
)
})
)
})}
</>
</div>
)
我很感激任何帮助。谢谢。
好的。
3个回答
所以,在我看来,你被困在这里:
<div className="App" key={`op - ${Math.floor(Math.random() * 110)}`}>
<>
{shelves.map(s => {
return (
books[s].map((b,i) => {
return (
<>
<h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
<div key={`${s}-${i}`}>
<Link to={`/book/${b.id}`}>
<img src={b.imageLinks.thumbnail} alt={b.title}></img>
</Link>
<Select className="sel-x"
placeholder="Choose a bookshelf..."
value={""}
options={shelvesN}
onChange={opt => changeShelf(opt.value,b.id)}
/>
</div>
</>
)
})
)
})
这个块包含 2 个映射,返回列表。 内部的映射不应使用 <>,因为它需要键引用,第一个映射也应如此。类似于:
shelves.map((s, I) => {
return (
<div key={I}>
{books[s].map((b,i) => {
return (
<div key={`${I}-${i}`}>
<h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
<div >
<Link to={`/book/${b.id}`}>
<img src={b.imageLinks.thumbnail} alt={b.title}></img>
</Link>
<Select className="sel-x"
placeholder="Choose a bookshelf..."
value={""}
options={shelvesN}
onChange={opt => changeShelf(opt.value,b.id)}
/>
</div>
</div>
</>
)
})}
</div>)
}
Victor Hugo Santos Barrozo
2019-04-24
您将从每个数组项返回
React.Fragment
,因此为每个 Fragment 分配唯一键,如下所示:
books[s].map((b,i) => { return ( <> ..... </> )})
使用此代码:
<div className="App" key={`op - ${Math.floor(Math.random() * 110)}`}>
<>
{shelves.map(s => {
return (
books[s].map((b,i) => {
return (
// ↓↓↓↓↓↓↓↓ add key here
<React.Fragment key={i}>
<h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
<div>
<Link to={`/book/${b.id}`}>
<img src={b.imageLinks.thumbnail} alt={b.title}></img>
</Link>
<Select className="sel-x"
placeholder="Choose a bookshelf..."
value={""}
options={shelvesN}
onChange={opt => changeShelf(opt.value,b.id)}
/>
</div>
</React.Fragment>
)
})
)
})}
</>
</div>
Mayank Shukla
2019-04-24
您使用迭代,这意味着您必须使用
keys
。
主题
您的代码看起来很糟糕,难以阅读,您应该在风格上做得更好。
shelves.map((s, I) => {
return (
<div key={I}>
{books[s].map((b,i) => {
return (
<div key={`${I}-${i}`}>
<h2>{((shelvesN.filter(o => o.value === s)))[0].label}</h2>
<div >
<Link to={`/book/${b.id}`}>
<img src={b.imageLinks.thumbnail} alt={b.title}></img>
</Link>
<Select className="sel-x"
placeholder="Choose a bookshelf..."
value={""}
options={shelvesN}
onChange={opt => changeShelf(opt.value,b.id)}
/>
</div>
</div>
</>
)
})}
</div>)
}
Michael George
2019-04-24