如何使用一个常见的属性和其他 JSON 对象来获得一个 JSON 中的特定属性？

Question

我是 react.js 的新手，在执行以下任务时遇到问题。

当运行跟随代码时，它显示setState无法使用并且应用程序中断。我有这两个对象，obj2生成一个table3 columns。我需要使 definition 列的每个单元格都不是 null 可点击的，然后将我带到 obj1 中存在的 team_wiki link。

obj1: {
    providers : [
         {team_name : "XYZ", team_wiki : "https://example.com", team_id : 1},
         {team_name : "ABC", team_wiki : "null", team_id : 2},
         {team_name : "LMN", team_wiki : "https://example2.com", team_id : 3},
         {team_name : "MNO", team_wiki : "https://example3.com", team_id : 4}
    ]
}

obj2: {
    products : [
       {team_name : "XYZ", definition : "this team handles XYZ products", metric_id : 101},
       {team_name : "ABC", definition : "this team handles ABC products", metric_id : 201},
       {team_name : "LMN", definition : "this team handles LMN products", metric_id : 301},
       {team_name : "MNO", definition : "this team handles MNO products", metric_id : 401}
    ]
}

代码：

state = {
    API_DATA : {},
    TEAM_WIKI : ''
}

componentDidMount(){
   // fetch the obj1 data and sets it to the state called API_DATA
}

wikiLink = (TEAM_NAME) {
   // getting TEAM_NAME from a component inside the render method
   const wiki = this.state.API_DATA.map(provider => {
       if (provider.team_name = TEAM_NAME && provider.team_wiki !== null) {
           return provider.team_wiki
       }
   })
   .map(link => {
       if (link !== undefined) {
           return link
       }
   })

   this.setState({
      // TEAM_WIKI is a state { its a string } where i want to store the 
      //team_wiki at last
      TEAM_WIKI : wiki
   })
}

render() {

   return (
         // i want to use it something like this
        < href="this.state.TEAM_WIKI" onClick={this.wikiLink(TEAM_NAME)} />
   ) 
}

Answer 1

函数 wikiLink 不是 class 函数，未绑定到您的组件。您可以使用 es6 语法绑定 wikiLink 或将 wikiLink 绑定到您的组件。

或者使wikiLink像

wikiLink = (TEAM_NAME) => { // rest of your code

或：在你的 constructor 中，你会做类似

的事情

constructor(){
this.wikiLink = this.wikiLink.bind(this)
}

Answer 2

在您的 wikiLink 中，您似乎正在尝试使用 => 箭头功能快捷方式？

您的 wikiLink 函数中遗漏了一些内容。你要么做

function wikilink (Data) {//rest of your code}

或者上面的回答是怎么说的。

Answer 3

我觉得当第一次渲染发生时，this.wikiLink 被调用，而不是 作为参考传递 .为什么我这么认为？因为我在那里看到圆括号。此方法的主体包含对 this.setState 的调用，这意味着组件的状态在渲染时交换，这违反了组件生命周期。

考虑一个案例：

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonClicked: false,
    };
    this.handleClickButton = this.handleClickButton.bind(this);
  }

  handleClickButton() {
    this.setState({
      buttonClicked: true,
    });
  }

  render() {
    return (
      <button onClick={this.handleClickButton()}>click me</button>
    );
  }
}

有问题！表达式 this.handleClickButton() 是一个函数调用。其中，有一个状态改变指令。当代码试图这样做时，React 显示警告：

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

我们真正想要的是在单击按钮时调用函数 this.handleClickButton。为此，我们需要将对此函数的引用传递给 onClick 属性，如下所示：

  render() {
    return (
      <button onClick={this.handleClickButton}>click me</button>
    );
  }

注意没有圆括号。

那你该怎么办？

有两种选择：

选项 1：onClick 中的匿名函数

而不是写作

render() {
   return (
     // i want to use it something like this
     <a href="this.state.TEAM_WIKI" onClick={this.wikiLink(TEAM_NAME)} />
   );
}

做

render() {
   return (
     // i want to use it something like this
     <a href="this.state.TEAM_WIKI" onClick={() => this.wikiLink(TEAM_NAME)} />
   );
}

这样，每次调用组件实例的 render 方法时，都会传递对就地声明的匿名函数的引用。然后，当用户决定单击时，将在某个不可预测的时间点调用此函数，即调度 "click".

类型的 MouseEvent

选项 2：使 this.wikiLink(•) return 成为函数！

函数的概念 return 函数通常被称为部分应用，或者在与此类似的情况下，通常被称为闭包。所以 wikiLink 函数将代替这个：

wikiLink(TEAM_NAME) {
  // getting TEAM_NAME from a component inside the render method
  const wiki = this.state.API_DATA.map(provider => {
    if ((provider.team_name = TEAM_NAME && provider.team_wiki !== null)) {
      return provider.team_wiki;
    }
  }).map(link => {
    if (link !== undefined) {
      return link;
    }
  });

  this.setState({
    // TEAM_WIKI is a state { its a string } where i want to store the
    //team_wiki at last
    TEAM_WIKI: wiki
  });
}

看起来像这样：

wikiLink(TEAM_NAME) {
  return () => {
    // getting TEAM_NAME from a component inside the render method
    const wiki = this.state.API_DATA.map(provider => {
      if ((provider.team_name = TEAM_NAME && provider.team_wiki !== null)) {
        return provider.team_wiki;
      }
    }).map(link => {
      if (link !== undefined) {
        return link;
      }
    });

    this.setState({
      // TEAM_WIKI is a state { its a string } where i want to store the
      //team_wiki at last
      TEAM_WIKI: wiki
    });
  };
}

所以当它被调用时，它return是一个新函数。因为onClickprop是期望接收一个函数，所以我们解决了类型匹配的问题。因为我们用一些参数 TEAM_NAME 调用 wikiLink 并且每次执行该函数时都会应用这个参数，所以我们解决了保留上下文的问题。是不是很厉害！

要更好地了解如何使用 return 是函数的函数，请查看 this Codesandbox，第 16 至 23 行。希望它会给出一些关于如何在以下情况下利用闭包的想法你需要管理 React 组件的状态。

干杯！

如何使用一个常见的属性和其他 JSON 对象来获得一个 JSON 中的特定属性？

How to get a particular property of one JSON using one common property with other JSON objects?

javascript

reactjs

ecmascript-6

lodash

ecmascript-2017

选项 1：onClick 中的匿名函数

选项 2：使 this.wikiLink(•) return 成为函数！

如何使用一个常见的 属性 和其他 JSON 对象来获得一个 JSON 中的特定 属性？

How to get a particular property of one JSON using one common property with other JSON objects?

javascript

reactjs

ecmascript-6

lodash

ecmascript-2017

选项 1：onClick 中的匿名函数

选项 2：使 this.wikiLink(•) return 成为函数！

如何使用一个常见的属性和其他 JSON 对象来获得一个 JSON 中的特定属性？