反應| 功能組件拋出錯誤useState Object（…）不是函數

Question

我正在嘗試根據本文創建一個組件：

https://scotch.io/tutorials/5-ways-to-convert-react-class-components-to-functional-components-w-react-hooks#toc-class-with-state-and-componentdidmount

但是，僅從上面的鏈接復制粘貼功能組件會引發錯誤：

TypeError: Object(...) is not a function
Home
src/components/Home.js:3
  1 | import React, { useState, useEffect } from 'react';
  2 | 
> 3 | function Home() {
  4 | 
  5 |   const [userName, setUsername] = useState('JD');
  6 |   const [firstName, setFirstname] = useState('John');

完整的組件代碼：

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

function Home() {

  const [userName, setUsername] = useState('JD');
  const [firstName, setFirstname] = useState('John');
  const [lastName, setLastname] = useState('Doe');

  useEffect(() => {
    setInterval(() => {
      setUsername('MJ');
      setFirstname('Mary');
      setLastname('Jane');
    }, 5000);
  });

  const logName = () => {
    // do whatever with the names ...
    console.log(this.state.userName);
    console.log(this.state.firstName);
    console.log(this.state.lastName);
  };

  const handleUserNameInput = e => {
    setUsername({ userName: e.target.value });
  };
  const handleFirstNameInput = e => {
    setFirstname({ firstName: e.target.value });
  };
  const handleLastNameInput = e => {
    setLastname({ lastName: e.target.value });
  };

  return (
    <div>
      <h3> The text fields will update in 5 seconds </h3>
      <input
        type="text"
        onChange={handleUserNameInput}
        value={userName}
        placeholder="Your username"
      />
      <input
        type="text"
        onChange={handleFirstNameInput}
        value={firstName}
        placeholder="Your firstname"
      />
      <input
        type="text"
        onChange={handleLastNameInput}
        value={lastName}
        placeholder="Your lastname"
      />
      <button className="btn btn-large right" onClick={logName}>
        {' '}
        Log Names{' '}
      </button>
    </div>
  );
};

export default Home;

Answer 1

掛鈎是一項即將推出的功能，可讓您無需編寫類即可使用狀態和其他React功能。 他們目前在React v16.8.0-alpha.0中。

請檢查react版本，因為hook方法適用於v16.8.0。

希望這可以幫助，

干杯！