React技巧之将useState作为字符串数组
将useState作为字符串数组
要在React中用一个字符串数组来类型声明useState钩子,可以使用钩子泛型。比如说,const [names, setNames] = useState<string[]>([])
。state变量可以被初始化为一个空数组,或者只接收字符串值的字符串数组。
// App.tsx
import {useState} from 'react';
const App = () => {
// ?️ const names: string[]
const [names, setNames] = useState<string[]>([]);
return (
<div>
<button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
Add name
</button>
{names.map((element, index) => {
return (
<div key={index}>
<h2>{element}</h2>
</div>
);
})}
</div>
);
};
export default App;
我们使用泛型来准确的对useState
钩子进行类型声明,同时使用空数组来初始化钩子。
如果我们不使用泛型,比如说,
useState<string[]>([])
。当输入钩子的时候,state变量的类型将会是never[]
。换句话说,就是一个永不包含任何元素的数组。
如果只为数组传入空字符串,TypeScript将会对state变量进行类型推断。
// App.tsx
import {useState} from 'react';
const App = () => {
// ?️ const names: string[]
const [names, setNames] = useState(['']);
return (
<div>
<button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
Add name
</button>
{names.map((element, index) => {
return (
<div key={index}>
<h2>{element}</h2>
</div>
);
})}
</div>
);
};
export default App;
请注意,我们甚至不需要使用泛型来对状态变量进行类型声明。TypeScript能够根据提供的初始值来推断类型。
然而,最好的做法是总是明确地类型声明useState钩子,特别是在处理数组和对象时。
如果尝试对state数组添加一个不同类型的值,我们将会得到一个类型检查错误。
// App.tsx
import {useState} from 'react';
const App = () => {
// ?️ const names: string[]
const [names, setNames] = useState<string[]>([]);
// ⛔️ Argument of type '(prevNames: string[]) => (string | number)[]' is not
// assignable to parameter of type 'SetStateAction<string[]>'.
setNames(prevNames => [...prevNames, 1000]);
return (
<div>
<button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
Add name
</button>
{names.map((element, index) => {
return (
<div key={index}>
<h2>{element.toUpperCase()}</h2>
</div>
);
})}
</div>
);
};
export default App;
这个例子展示了,试图向一个类型为string[]
的state数组添加一个数字会导致类型检查器出错。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。