“Render methods should be a pure function of props and state.“这报错啥原因

这个错误提示通常出现在 React 组件的 render 方法中，是由于 render 方法不满足纯函数的定义而导致的。

在 React 组件中，render 方法应该是一个纯函数，它接受组件的 props 和 state 作为输入，并返回一个 React 元素（React Element）。所谓纯函数，是指在同样的输入下，输出结果总是相同的，且不会对外部状态造成影响。

如果在 render 方法中，你使用了除了 props 和 state 之外的变量、调用了副作用函数，如修改了组件外部的状态、请求了网络数据等，就会导致该方法不再是纯函数，会触发上述错误提示。

要解决这个问题，你需要检查 render 方法中是否有修改 state 的代码或使用了不应该出现的副作用函数。如果需要使用副作用函数，你可以将它们移到组件的其他生命周期函数中进行处理，例如 componentDidMount、componentDidUpdate 等。同时，你还可以考虑使用 React Hooks 来管理组件的状态和副作用，以避免在 render 方法中出现副作用。

需要注意的是，如果你的组件中有条件渲染或列表渲染等复杂场景，可能需要在 render 方法中使用一些计算逻辑。这时，你需要确保这些计算逻辑是基于 props 和 state 的，不包含任何副作用和外部状态，以保证 render 方法仍然是一个纯函数。

假设你有一个计数器的 React 组件，如下所示：

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    // 错误示例：在 render 方法中修改了 state
    this.setState({ count: this.state.count + 1 });

    return (
      <div>
        <p>当前计数：{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点击计数
        </button>
      </div>
    );
  }
}

在上述示例中，render 方法中调用了 setState 方法，修改了组件的 state，这样就会触发上述错误提示。因为 setState 方法是一种副作用函数，它会修改组件的状态并触发重新渲染，如果在 render 方法中调用它，就会导致 render 方法不再是纯函数，会引发副作用和不可预期的行为。

要解决这个问题，你可以将修改 state 的逻辑移到其他生命周期函数中，例如 componentDidMount、componentDidUpdate 等。如果需要在 render 方法中使用计算逻辑，可以将它们封装到其他函数中，并在 render 方法中调用。例如：

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  // 正确示例：在其他生命周期函数中修改 state
  componentDidMount() {
    this.setState({ count: this.state.count + 1 });
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  // 正确示例：将计算逻辑封装到其他函数中
  renderCount() {
    const { count } = this.state;
    return <p>当前计数：{count}</p>;
  }

  render() {
    return (
      <div>
        {this.renderCount()}
        <button onClick={this.handleClick}>点击计数</button>
      </div>
    );
  }
}

在上述示例中，我们将修改 state 的逻辑移到了 componentDidMount 函数中，将计算逻辑封装到了 renderCount 函数中，并在 render 方法中调用。这样就可以保证 render 方法仍然是一个纯函数，避免了出现副作用和不可预期的行为。