React:从功能组件中设置容器中的状态

React: setting state in container from within functional component

本文关键字：状态 设置 React 功能 组件      更新时间：2023-09-26

所以我有一个容器组件，它呈现一个功能组件以及其他一些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()，但问题仍然存在。这是上下文问题吗?

更习惯一点…

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>
  );
};

我认为问题是你的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>
  );
};
相关文章：