在 React 中使用 useState 未在函數組件中更新狀態

Question

我正在嘗試更新function component state 。

看來我在這里遇到了問題。 請告訴為什么它會出錯？

代碼片段：

import React, { useState, useEffect } from 'react';

const HomeFunctional = () => {

  const [details, setDetails] = useState({name: "Jack Rogers", age: 29, city: "New York"});

  alpha = () => {
    setDetails({name: "Julious Cezer", age: 59, city: "Rome"});
  }

  return (
    <div>
      <p>Home Functional!</p>
      <p>{details.name + "/" + details.age + "/" + details.city} </p>
      <button onClick={this.alpha}>Change Values</button>
    </div>
  )
}

export default HomeFunctional;

錯誤：

Answer 1

如果您使用的是功能組件，則必須編寫const alpha

 const alpha = () => {

而不是使用this.alpha你只需寫alpha 。

 <button onClick={alpha}>Change Values</button>

代碼沙盒在這里