如何使用与其他 JSON 对象的一个公共属性来获取一个 JSON 的特定属性？

我觉得当第一次渲染发生时，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 会显示警告：

警告：setState(...)：无法在现有状态转换期间更新（例如在render其他组件的构造函数中）。Render 方法应该是 props 和 state 的纯函数；构造函数的副作用是一种反模式，但可以移至componentWillMount.

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

  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组件实例的方法时，都会传递对就地声明的匿名函数的引用。然后，当用户决定单击时，将在某个不可预测的时间点调用此函数，即分派“单击”类型的 MouseEvent。

选项 2：使 this.wikiLink(•) 返回一个函数！

函数返回函数的概念通常被称为部分应用程序，或者在与此类似的情况下更常见的是闭包。因此，该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
    });
  };
}

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

要更好地了解使用返回函数的函数，请查看此 Codesandbox，第 16 到 23 行。希望它能够让您了解在需要管理 React 组件状态的情况下如何利用闭包。

干杯!