动人青春，筑梦前行——记一次React学习历程

2023-10-28 16:55:55

缘起

听说每个好学生都会有个错题本，大概这就是我和大佬之差距吧。但是！现在！为了接近大佬，我也决定开始记录错题了！虽然学了一年前端才开始写博客，虽然直到找工作才开始写博客。但是，我相信，只要肯开始，就一定不晚！e ...应该，也许，可能不晚吧。

当然，今天要说的就是我刚开始学习React时的一个错误。问题是这样出现的：

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;

这是一个简单的React组件，它有一个状态变量count，一个按钮，点击按钮后会将count的值增加1。但是，当我运行这个组件时，发现count的值并没有变化。

寻根究底

我花了很长时间来调试这个错误，但一直没有找到原因。最后，我终于意识到，问题出在setCount函数中。

在React中，状态变量是只读的，不能直接改变。因此，如果想改变状态变量的值，必须使用setState函数。

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevState => prevState + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default MyComponent;