Javascript 直接更新状态时onClick事件处理程序未触发-ReactJS_Javascript_Html_Reactjs

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

javascript html reactjs

Javascript 直接更新状态时onClick事件处理程序未触发-ReactJS,javascript,html,reactjs,Javascript,Html,Reactjs,我是新手。我有以下代码，其中我尝试通过使用onClick事件处理程序更新状态来更新UI。然而，onClick没有启动，甚至没有显示在最终的HTML中。我可以看到按钮，但按钮未绑定到事件处理程序。我的代码是： import React from 'react'; class App extends React.Component { constructor() { super(); this.state = { data: [] }

我是新手。我有以下代码，其中我尝试通过使用onClick事件处理程序更新状态来更新UI。然而，onClick没有启动，甚至没有显示在最终的HTML中。我可以看到按钮，但按钮未绑定到事件处理程序。我的代码是：

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>

我做错了什么

编辑：

当我更改var myArray=this.state.data时；to var myArray=this.state.data.slice；它按预期工作。

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

工作代码：

在我的示例中，我使用函数作为setState的参数，它将向我传递组件状态的副本。然后，我使用DestructuringAssignment…prevState创建带有item元素的新数组。最后，我返回要合并到状态中的对象

注意，为了方便和简洁，我使用了解构赋值。只需克隆阵列即可完成相同的操作：

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

除此之外，你也应该通过考试。

但这不是本例中的问题。

尝试使用{Stringthis.state.data}或{this.state.data.toString}

也许它不喜欢onClick和{this.setStateHandler}之间的空格…我确实在这里看到了webpackbin中触发的事件，尽管我确实将myArray更改为您状态的副本。看看这个网页：是的，一旦我做了var myArray=this.state.data.slice；它是有效的。。。有人能解释一下吗？即使没有。切片，它也能工作。这只是一个很好的做法，不直接推到您的状态或更改/变异它。作为旁注，您应该避免使用.bindthis，因为它被认为是不好的practice@swdon您能尝试用我在编辑中包含的内容替换您的组件吗？如果这仍然不起作用，请告诉我。是的，这起作用了，你能解释一下代码吗？什么是。。。之前的状态意味着什么？请在答案中添加更多详细信息，我们将接受您的答案。@swdon我进行了编辑。我试图尽可能地把它弄清楚，但听起来可能比实际情况更复杂。

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

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