Reactjs：单击时更新组件的值

Question

我构建了一个最小的 ReactJS 组件来更新点赞数。一切正常，但单击时计数不会更新。我尝试了几个答案，但无法弄清楚原因。

见代码：

import React, {useState} from 'react';

class GiveLikes extends React.Component {
  // set the initial value of the likes
  state = {likes:0};

  // Function is called every time "likes" is clicked
  likes_count = (likes) =>{
    // Counter state is incremented
    this.state({likes: likes+1});
    }
    
  render() {
    return (
      <>
      <h2> {this.state.likes} </h2>
      <div className="buttons">
        <button style={{
        fontSize: '60%',
        position: 'relative',
        top: '20vh',
        marginRight: '5px',
        backgroundColor: 'green',
        borderRadius: '8%',
        color: 'white',
        }}
        onClick={() => this.likes_count}>Likes
        </button>
      </div>  
    </>

    )

    }
  }
  
export default GiveLikes;

以上代码将在网络浏览器上呈现以下内容。单击“喜欢”应该会更新计数值，但不幸的是它不会。

Answer 1

添加一个构造函数并初始化this.state否则它将不存在

每次您重新渲染组件（通过状态或道具更改）时，您将使用 {likes: 0} 一次又一次地重新创建您的 state，但它不会工作。

此外，您正在混合 class 组件和功能组件的语法风格，这将导致 React 和您的代码出现更多错误和问题。

此外，您需要放置一个将在 onClick 中调用的函数，但您创建了一个 returns 函数的函数，这在您的情况下是错误的。

另一个问题是使用 this.setState 设置你喜欢的状态，而不仅仅是将状态作为函数调用。

import React from 'react';

class GiveLikes extends React.Component {

  constructor(props) {
    super(props);
    this.state = {likes: 0};
  }

  likes_count = () => {
    this.setState ({likes: this.state.likes +1});
  }
    
    render() {
      return (
        <>
        <h2> {this.state.likes} </h2>
        <div className="buttons">
          <button style={{
          fontSize: '60%',
          position: 'relative',
          top: '20vh',
          marginRight: '5px',
          backgroundColor: 'green',
          borderRadius: '8%',
          color: 'white',
          }}
          onClick={this.likes_count}>Likes
          </button>
        </div>  
      </>

      )

    }
}

export default GiveLikes;

阅读有关反应的内容。

专注于您的第一个组件（在线查找带有计数器组件的示例）。

不了解就不要贸然入手。 React 很有趣。

Answer 2

编辑：

这个答案的总结是状态不存在，因为 this.state

没有构造函数

我相信答案是永远不会更新道具。我们将按原样使用它们。听起来很僵硬吧？但是 React 在这个规则背后有其原因，我非常相信他们的推理。不过，唯一需要注意的是，在某些情况下我们可能需要启动 prop 的更新。我们很快就会知道怎么做。

考虑父组件中的以下代码行：

<MyChild childName={this.state.parentName} />

现在，如果需要更改名称，parentName 将在父级中更改，并且该更改将自动传达给子级，就像 React 机制的情况一样。此设置适用于大多数情况。

但是如果你需要更新子组件的prop，而需要更改的知识和更改它的触发器只有子组件知道怎么办？考虑到 React 的方式，数据只能从上到下流动，即从父到子。那么我们如何与家长沟通需要更改 prop 呢？

来自以下来源的回答：https://www.freecodecamp.org/news/how-to-update-a-components-prop-in-react-js-oh-yes-it-s-possible-f9d26f1c4c6d/

我只展示了您需要阅读的部分。下次请好好分析你的代码，这并不难。

Answer 3

您忘记调用函数了-

onClick={() => this.likes_count()}

此外，您需要使用来自状态的数据，然后像 -

一样更新它，而不是传递点赞

    likes_count = () => {
    let likes = this.state.likes;
    this.setState({ likes: likes + 1 });
    };

Answer 4

声明一个构造函数并初始化你的状态，
在你的 likes_count() 方法上使用 arrow function
使用this.setState({likes: this.state.likes +1});代替this.state({likes: this.state.likes +1});

import React, {useState} from 'react';
class GiveLikes extends React.Component {

constructor(props) {
  super(props);
  this.state = {likes: 0};
}

likes_count = () => {
    this.setState({likes: this.state.likes +1});
}

render() {
    return (
    <>
    <h2> {this.state.likes} </h2>
    <div className="buttons">
      <button style={{
        fontSize: '60%',
        position: 'relative',
        top: '20vh',
        marginRight: '5px',
        backgroundColor: 'green',
        borderRadius: '8%',
        color: 'white',
        }}
        onClick={this.likes_count}>Likes
      </button>
    </div>  
    </>
    )
  }
}
export default GiveLikes;

Reactjs：单击时更新组件的值

Reactjs : Update value of a component on click

javascript

web-component

reactjs

react-props

react-state