在没有组件安装的情况下如何在内部具有setState的函数内部调用函数？

如何解决在没有组件安装的情况下如何在内部具有setState的函数内部调用函数？

我正在尝试使用Can i have a function inside a state in react?中给出的答案在绑定函数中使用函数。我也尝试使用JSON.stringify'const data'。我可以打印按钮，但是我试图将单击的按钮存储为值。

const InitArr = ({ myArray,handleClick }) => ( <div> {myArray.map(item => (<button onClick={() => handleClick(item.key)}>{item.key}</button> ))}    </div>)
class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {myArray: [{"key": "7"},{"key": "8"},{"key": "9"},{"key": "4"},{"key": "5"},{"key": "6"},{"key": "1"},{"key": "2"},{"key": "3"},{"key": "0"}],value: '0',};
     this.setValues = this.setValues.bind(this)
     this.handleClick = this.handleClick.bind(this)
   }
   setValues(key) {
      const temp = key
   }
   handleClick(key) {
       const { value } = this.state
       const data = setValues(key)
       this.setState({ value: data })
    }
    render() {
    return (
       <div>
          <div>{this.state.value}</div>
              <InitArr myArray={this.state.myArray} handleClick={this.handleClick} />
       </div>
     );}}
     ReactDOM.render( <App />,document.getElementById("root"));

解决方法

您的代码存在问题，因为您调用的是setValues(key)而不是this.setValues(key)，因此在当前范围内找不到setValues。

进行更改以允许代码运行，尽管我还更改了setValue以返回某些内容，因此呈现的数字将不会消失：

setValues(key) {
    const temp = key;
    return key;
  }

const InitArr = ({ myArray,handleClick }) => (
  <div>
    {' '}
    {myArray.map((item) => (
      <button onClick={() => handleClick(item.key)}>{item.key}</button>
    ))}{' '}
  </div>
);
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myArray: [
        { key: '7' },{ key: '8' },{ key: '9' },{ key: '4' },{ key: '5' },{ key: '6' },{ key: '1' },{ key: '2' },{ key: '3' },{ key: '0' },],value: '0',};
    this.setValues = this.setValues.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  setValues(key) {
    const temp = key;
    return key;
  }
  handleClick(key) {
    const { value } = this.state;
    console.log(key);
    const data = this.setValues(key);
    this.setState({ value: data });
  }
  render() {
    return (
      <div>
        <div>{this.state.value}</div>
        <InitArr myArray={this.state.myArray} handleClick={this.handleClick} />
      </div>
    );
  }
}
ReactDOM.render(<App />,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>