在React组件中使用Map函数

Question

我有一个React组件。它加载一个本地JSON文件。在构造函数中，我想循环遍历本地JSON文件，找到与URL参数匹配的项，并设置一些状态值。下面是我到目前为止的代码:

import React,{Component} from "react";
import topics from './topics.json';
class Tutorial extends Component {
constructor(props){
super(props);
topics.map((topic, index) => {
if(topic.url === this.props.match.params.url)
{
this.state = {
url: this.props.match.params.url,
name: topic.name
};
}
})
}
render() {
return (
<div className="Tutorial">
<div className="ca-nav-spacer w3-hide-small"></div>
{this.state.name}
{this.state.url}
</div>
);
}
}
export default Tutorial;

Array.prototype.map()期望从箭头函数

返回值.map函数必须返回值吗?如果我没有返回值，我应该使用for循环吗?我可以返回JSON块，然后设置映射后的状态吗?正确的做法是什么?

编辑:将页面更改为主题

Answer 1

我的强烈建议有两点:

• 使用find方法查找正确的主题
• 不要使用state来冗余存储你已经从props中获得的信息。存储您已经拥有的信息可能导致分歧。在这种情况下，我们可以在渲染方法中find适当的主题:

import React, { Component } from "react";
import topics from "./topics.json";
class Tutorial extends Component {
constructor(props) {
super(props);
}
render() {
const selectedTopic = topics.find(
(topic, index) => page.url === this.props.match.params.url
);
return (
<div className="Tutorial">
<div className="ca-nav-spacer w3-hide-small"></div>
{selectedTopic.name}
{this.props.match.params.url}
</div>
);
}
}
export default Tutorial;

Answer 2

虽然find在大多数情况下都可以工作，但由于我没有包括的原因，它不能工作。最后，我在构造函数中使用了forEach循环。

constructor(props){
super(props);
topics.forEach((topic) => {
if(topic.url === this.props.match.params.url)
{
this.state = {
url: topic.url,
title: topic.title
}
}
})
}

谢谢大家!

Answer 3

没有看到JSON结构，很难回答

---

将{}更改为()可能有效

从map(() => {})到map(() => ())

Array.prototype.map()期望从箭头函数返回一个值

---

另一个答案

尝试使用forEach(用forEach代替map)，我猜你的JSON不返回数组。