Question

所以我有一个容器组件，它与其他一些JSX一起呈现一个功能组件。我试图通过从功能组件内部发生的按钮单击来更改该容器中的状态。但是我还没有找到一篇关于解决这个问题的好文章，我遇到this.setState() is not a function的问题，或者通过尝试trigger a setState call during a render（或多或少）完全打破当前标签。

以下是一些示例代码来说明我的意思：

class TestComponent extends Component {
  render() {
    <div>
      <FunctionalComponent close={(type) => this.setState({ property: type })} />
    </div>
  }
};

功能组件：

const FunctionalComponent = (props) => {
  return (
    <button onClick={props.close('stringvalue')}>Click to setState</button>
  );
};

还尝试在容器内创建一个单独的函数并从那里调用this.setState()，但问题仍然存在。这是一个背景问题吗？

Answer 1

更加惯用。。

class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.onClose = this.onClose.bind(this);
  }

  onClose(property) {
    this.setState({ property })
  }

  render() {
    return (
      <div>
        <FunctionalComponent close={this.onClose} />
      </div>
    )
  }
};

const FunctionalComponent = ({ close }) => {
  return (
    <button onClick={close.bind(null, 'stringvalue')}>Click to setState</button>
  );
};

Answer 2

我认为问题在于，每次渲染都会调用props.close函数，因为您没有传递函数而是调用它。

onClick需要一个函数。

const FunctionalComponent = (props) => {
  function onClick() {
    props.close('stringvalue');
  }
  return (
   <button onClick={onClick}>Click to setState</button>
  );
};

或

const FunctionalComponent = (props) => {
  return (
   <button onClick={() => props.close('stringvalue')}>Click to setState</button>
  );
};

React：在功能组件

2 个答案: