我在使用语义UI动态呈现此列表时遇到困难。我遇到了意外的令牌错误,但是我不确定如何使它正常工作。二者users_titles
并users_entries
处于状态设定数组,但是从终极版映射,所以它们是相同的长度。(无效)代码如下。我只是想要一个以(title-1..entry1,title2..entry2等)排序的列表。
看起来仅调用另一个组件来创建列表似乎是不必要的(而且我仍然不确定该如何更好地工作)。我和JS都是新手,所以我们将不胜感激。谢谢!
class UsersPosts extends React.Component
...
displayListPosts = () => {
for (let index = 0; index < this.state.users_entries.length; index++) {
//debugger
<List.Item>
<List.Icon name='file outline' />
<List.Content>
<List.Header >
{this.state.users_titles[index]}
</List.Header>
<List.Description>
{this.state.users_entries[index]}
</List.Description>
</List.Content>
</List.Item>
}
}
...
render() {
const { loaded } = this.state
if (loaded) {
return (
<List>
{ this.displayListPosts() }
</List>
)
更新:
从接受的答案获得帮助后,工作代码如下所示:
displayListPosts = () =>
this.props.posts.map((el) => (
<List.Item>
<List.Icon name='file outline' />
<List.Content>
<List.Header >
{el.title}
</List.Header>
<List.Description>
{el.entry}
</List.Description>
</List.Content>
</List.Item>
));
,posts
道具在哪里,形式为:
[ {id:1,title:'Quis.',entry:'Lorem'...},
{id:2,title:'Consequatur.',ent…:31.999Z'},
{id:3,title:'Laboriosam.',entr…:32.004Z'},
{id:4,title:'Eum.',entry:'Eaqu…:32.010Z'},
{id:5,title:'Reiciendis.',entr…:32.015Z'},
{id:6,title:'Nemo.',entry:'Qui…:32.020Z'},...]
如果您可以将数据塑造为对象数组,那就更好了。喜欢:
[
{ title: "title1", entry: "entry1" },
{ title: "title2", entry: "entry2" }
]
通过这种形状,您可以轻松地映射数据并使用属性。但是,如果要根据当前情况执行此操作,则可以映射一个属性,然后使用索引,因为长度相等,因此可以使用相应的属性。不要使用for循环,该.map
方法通常是您的朋友。
class App extends React.Component {
state = {
user_titles: ["title1", "title2"],
user_entries: ["entry1", "entry2"]
};
displayListPosts = () =>
this.state.user_titles.map((el, i) => (
// Maybe, there is a better key :D
<div key={`${el}-${this.state.user_entries[i]}`}>
<p>Title: {el}</p>
<p>Entry: {this.state.user_entries[i]}</p>
</div>
));
render() {
return <div>{this.displayListPosts()}</div>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句