Javascript React typescript计数器未更新

我在react with typescript中编写了我的第一个组件：一个简单的计数器

树是：索引->应用程序反应/js->反反应/js

点击按钮，state.count将递增/递减。我看到了console.log，但是带有{state.count}的标记没有在单击时更新

为什么?？我的错在哪里

谢谢你的帮助

我试图将key属性添加到div标记中

Counter.tsx

import React from "react";

interface IState {
  count: number;
}



export default function Counter(): JSX.Element {

const state: IState = { count: 0 };

const increment = (): any => {
  console.log(state);
     state.count= state.count + 1

};

const decrement = (): any => {
  console.log(state);

  state.count = state.count - 1;
};
  return (
    <div>
      <h2>Counter</h2>
      <div>
        <button onClick={decrement}>-</button>
        <div key={state.count}>{state.count}</div>
        <button onClick={increment}>+</button>
      </div>
    </div>
  );
}

App.tsx

import React from 'react'
import Counter from "./counter";

export default function App():JSX.Element {
    return (
      <div>
        <Counter />
      </div>
    );
}

index.tsx

import React from 'react'
import ReactDOM from "react-dom";
import App from './components/App'

const root = document.getElementById('app-root')
ReactDOM.render(<App />, root);

---

我希望通过单击按钮，数字会发生变化。

您正在改变状态！！试试这个：

this.setState({count : this.state.count + 1})

---

你在改变国家！！试试这个：

this.setState({count : this.state.count + 1})

---

在这里，代码解决了这个问题：

import React,{useState} from "react";

interface IState {
  count: number;
}



export default function Counter(): JSX.Element {
 const [count, setCounter] = useState(0);
const state: IState = { count: 0 };

const increment = (): any => {
  console.log(state);
     setCounter(count+1);


};

const decrement = (): any => {
  console.log(state);
  setCounter(count -1);

};
  return (
    <div>
      <h2>Counter</h2>
      <div>
        <button onClick={decrement}>-</button>
        <div key={count}>{count}</div>
        <button onClick={increment}>+</button>
      </div>
    </div>
  );
}

---

在这里，代码解决了这个问题：

import React,{useState} from "react";

interface IState {
  count: number;
}



export default function Counter(): JSX.Element {
 const [count, setCounter] = useState(0);
const state: IState = { count: 0 };

const increment = (): any => {
  console.log(state);
     setCounter(count+1);


};

const decrement = (): any => {
  console.log(state);
  setCounter(count -1);

};
  return (
    <div>
      <h2>Counter</h2>
      <div>
        <button onClick={decrement}>-</button>
        <div key={count}>{count}</div>
        <button onClick={increment}>+</button>
      </div>
    </div>
  );
}

---

请注意，不能使用state.variable=…对state进行变异。setState断开js。也许我写了一个无状态组件，我需要改变它之外的状态？你需要把它变成一个类组件。或者使用useState，要点是永远不要改变stateSolved：我将useState钩子添加到我的组件中，这样它就可以工作了。我明白分配变量不是改变状态只是分配一个变量。。。我们必须告诉react变量就是状态。太好了！考虑接受答案来结束这个问题。祝你好运请注意，不能使用state.variable=…对state进行变异。setState断开js。也许我写了一个无状态组件，我需要改变它之外的状态？你需要把它变成一个类组件。或者使用useState，要点是永远不要改变stateSolved：我将useState钩子添加到我的组件中，这样它就可以工作了。我明白分配变量不是改变状态只是分配一个变量。。。我们必须告诉react变量就是状态。太好了！考虑接受答案来结束这个问题。祝你好运在React by do setState中更新状态在React by do setState中更新状态