我想在狀態中存盤對類的參考，但發生錯誤。
具體來說，如下：
useState(SomeClass)
結果是：
Class constructor SomeClass cannot be invoked without 'new'
??...
我可以為我的特定需求找到另一條路線，但我想了解這里的問題到底是什么。
--
FWIW 這是一個具體情況，上面會有用：
考慮一個顯示串列Super[]但按子類過濾的組件。該組件包含一組用于設定過濾的單選按鈕。例如
const FilterableListView = (props:{items:SuperType[]})=>{
const [SelectedType,setType] = useState(DefaultType as SuperType)// where DefaultType extends SuperType
const itemsToDisplay = props.items.filter(item=>item instanceof SelectedType)
// in radio button callback somewhere...
setType(SomeOtherSubType)
...
}
這里的狀態是過濾條件。不需要任何類參考的實體。
同樣，我可以用多種方式給這只貓剝皮——我只是想知道為什么useState(Class)會導致嘗試實體化Class.
uj5u.com熱心網友回復：
該useState()鉤子支持延遲初始化，這意味著如果它接收到一個函式，它將在第一次（也是唯一一次）渲染時呼叫它。回傳的值將用作初始狀態。
為了避免這種情況，請傳遞一個回傳類作為初始狀態的函式：
const [SelectedType, setType] = useState(() => SomeClass)
正如よつば所指出的，當您使用setType替換類時也會發生同樣的事情，因為該setX函式還支持功能更新。更新狀態呼叫：
setType(() => AnotherClass)
uj5u.com熱心網友回復：
您不能將類用作狀態的原因是因為useState允許Lazy initial state。
initialState引數是初始渲染期間使用的狀態。在隨后的渲染中，它被忽略。如果初始狀態是昂貴計算的結果，您可以提供一個函式，該函式僅在初始渲染時執行：
// lazy initial state example
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props);
return initialState;
});
一種可能的解決方案是將您的類包裝在一個物件中，例如{ maker: MyClass }. 這是一個最小的完整示例。單擊create以創建物件。單擊??或??更改所創建物件的型別。
class Circle {
constructor() { this.value = "??" }
}
class Square {
constructor() { this.value = "??" }
}
function App() {
const [mode, setMode] = React.useState({ maker: Circle })
const [elements, setElements] = React.useState([])
return <div>
<button
onClick={_ => setMode({ maker: Square })}
disabled={mode.maker === Square}
children="??"
/>
<button
onClick={_ => setMode({ maker: Circle })}
disabled={mode.maker === Circle}
children="??"
/>
<button
onClick={_ => setElements([...elements, new mode.maker()])}
children="create"
/>
{elements.map(e => <div className="element">{e.value}</div>)}
</div>
}
ReactDOM.render(<App/>, document.querySelector("#app")).element {
display: inline-block;
margin: 5px;
}
button[disabled] {
border-color: red;
border-radius: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>uj5u.com熱心網友回復：
你應該記住，當我們想要訪問一個類的資料成員或成員函式時，我們需要實體化這個類并擁有一個可以使用的物件。
當您將類名傳遞給 useState Hook 時，該方法將不知道如何處理該類，因此會引發錯誤，要求您使用 new 關鍵字呼叫該類。
你可以改為在這些行中做一些事情。
const [foo, setFoo] = React.useState(() => {
new Foo("Foo text!", new Bar("Look this data!"))
});轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/428548.html
下一篇：為字串陣列反應鍵