無法在React中使用“ useState”功能組件

Question

我有一個帶有useState鈎子的React功能組件。

我將此功能組件用作src到index.html的腳本標簽。 當我在此功能組件的末尾添加一個render方法時，它將引發錯誤，指出無效的掛鈎。

我創建了一個index.html ，在其中我已將welcome.js分配為腳本標簽的源。 該腳本執行時，將調用函數welcome.js 。 在Welcome函數中，如果我使用狀態掛鈎，則會引發錯誤：

“無效的掛鈎調用。只能在函數組件的主體內部調用掛鈎”

<script src="./Welcome.js"> </script>

welcome.js ：

import React, {useState} from "react";
import {render} from "react-dom";

const Welcome = () => {
    const [name, setName] = useState("name");

    return(
        <div>     
            <label htmlFor="name">Name</label>       
            <input
             id="name"
             value={name}
             onChange= {e=>setName(e.target.value)}
             >
            </input>
        </div>
    )
}

render(<Welcome/>, document.getElementById("root"));

我想知道為什么我不能在welcome.js使用狀態掛鈎。 我們不能將狀態掛鈎與render方法一起使用嗎？

Answer 1

組件內部的代碼有效。 問題在於依賴性問題或構建工具配置。 確保

1. 您的React-dom版本大於16.8.0（運行npm ls react-dom ）
2. 您只有一個版本的react導入。 （運行npm ls react ）

這是使用您提供的代碼的工作示例的鏈接。 注意pakcage.json文件。 在React docs中更多細節