在 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 在大多数情况下都可以使用，但由于我没有提供的原因，它不会。我最终在构造函数中使用了一个 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 2

我的强烈建议有两个：

• 使用find 方法查找正确的主题。
• 不要使用状态来冗余存储您已经从道具中获得的信息。存储您已有的信息可能会导致分歧。在这种情况下，我们可以在 render 方法中 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 3

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

---

将 {} 更改为 () 可能会起作用

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

Array.prototype.map() 期望箭头函数 array-callback-return react 的返回值

---

另一个答案

尝试使用forEach（将map 替换为forEach）我猜您的JSON 不会返回数组。