Question

我是ReactJS的新手。我有以下代码，其中我尝试使用onClick事件处理程序更新onClick来更新UI。但是，import React from 'react'; class App extends React.Component { constructor() { super(); this.state = { data: [] } this.setStateHandler = this.setStateHandler.bind(this); } setStateHandler() { var item = "setState..."; var myArray = this.state.data; myArray.push(item) this.setState({data: myArray}) } render() { return ( <div> <button onClick = {this.setStateHandler}>SET STATE</button> <h4>State Array: {this.state.data}</h4> </div> ); } } export default App;没有触发，甚至没有显示在最终的HTML上。我可以看到按钮，但按钮没有绑定到事件处理程序。我的代码是：

<html lang="en"><head>
      <meta charset="UTF-8">
      <title>React App</title>
   <style type="text/css"></style></head>

   <body>
      <div id="app">
        <div>
          <button>SET STATE</button><h4>State Array: </h4>
        </div>
      </div>
 <script src="index.js"></script>
</body>
</html>

我在浏览器上呈现的最终HTML是：

var myArray = this.state.data;

我做错了什么？

编辑：

当我将var myArray = this.state.data.slice();更改为{{1}}时，它会按预期工作。

Answer 1

您不应该在HTML中看到onClick处理程序，这就是React的工作方式。

工作代码：

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         data: []
      }
      this.setStateHandler = this.setStateHandler.bind(this);
   }

   setStateHandler() {
      var item = "setState...";
      this.setState(prevState => ({ data: [...prevState.data, item]}));
   }

   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}

export default App

示例中的问题在setStateHandler定义范围内。您正在直接修改状态not a correct way to update state。

   setStateHandler() {
      var item = "setState...";
      this.setState(prevState => ({ data: [...prevState.data, item]}));
   }

在我的例子中，我使用函数作为setState（read when to use function as argument）的参数，它将传递给我一个组件状态的副本。然后我使用解构赋值（... prevState）来创建一个带有item元素的新数组。最后我将对象合并为状态。

请注意，为了方便和简洁，我使用了解构分配。您只需克隆数组即可完成相同的操作：

   setStateHandler() {
      var item = "setState...";
      this.setState(prevState => {
        const newArray = prevState.data.slice();
        newArray.push(item);
        return { data: newArray };
      });
   }

除此之外，您还应该通过props to base constructor。但在这种情况下，这不是问题。

Answer 2

请尝试使用{String(this.state.data)}或{this.state.data.toString()}。

直接更新状态时onClick事件处理程序不会触发 - ReactJS

2 个答案: