我正在嘗試自學 React，我有一個“Bop it”按鈕功能，可以在每次點擊時更改文本。
function BopButton() {
const [action, setAction] = React.useState('');
const actions = ['Bop', 'Twist', 'Spin', 'Pull'];
function handleClick() {
const len = actions.length;
setAction(actions[Math.floor(Math.random() * len)].text)
console.log("change text")
}
return (
<div>
<button onClick={handleClick}>{action} it</button>
</div>
);
}
我期待按鈕文本的狀態發生變化。我究竟做錯了什么？
uj5u.com熱心網友回復：
actions是一個字串陣列，而不是物件陣列。您不必訪問具有屬性的文本，因為它根本不存在。.text
只需將其洗掉。
setAction(actions[Math.floor(Math.random() * len)]);
uj5u.com熱心網友回復：
你只是有一個多余的.text
我重構了一點以使其更具可讀性：
import { useCallback, useState } from 'react'
const actions = ['Bop', 'Twist', 'Spin', 'Pull']
const BopButton = () => {
const [action, setAction] = useState(actions[0])
const handleClick = useCallback(() => {
setAction(actions[Math.floor(Math.random() * actions.length)])
}, [])
return (
<div>
<button onClick={handleClick}>{action} it</button>
</div>
)
}
export default BopButton
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/534792.html
標籤：javascript反应