React设置默认状态
我正在寻找一些关于在react中设置默认状态的指导。我有一个使用typescript & react的简单项目，它允许将文件拖放到div上。我正在尝试将这些文件存储在状态中，但在设置默认状态时遇到了问题。
export interface IAppState{
value:string;
droppedFiles: FileList
}
constructor(props: {}) {
super(props);
this.state{
value:'',
droppedFiles?:???
}
}
public render(): JSX.Element {
return (
<div className="App">
<div className="Padding">
<FileDrop onDrop={this.handleDrop}>
Drop some files here!
</FileDrop>
</div>
</div>
);
}
private handleDrop = (files:FileList, event:ReactDragEvent<HTMLDivElement>) => {
this.setState({
droppedFiles:files
});
console.log(this.state.droppedFiles);
}如果从this.state步骤中删除了droppedFiles，它显然会标记为找不到该值。由于TypeScript的类型安全，它不会接受{}。初始化/设置复杂类型的默认值的正确方法是什么？
我的主要问题是我面临着来自typescript的错误，因为我不知道如何用正确的数据初始化state.droppedFiles属性。我不想在构造函数中给它分配任何数据，我会在用户实际删除文件时这样做。我只是在寻找正确的方法来让TS知道状态有一个'droppedFiles‘的属性，它的类型是'FileList'：TS Error
如果没有这一部分，它将在运行时抛出一个错误，这是我所期望的：Error
因此，为了关闭它，事实证明FileList不是一个File[]。为了解决这个问题，我更新了我的界面：
export interface IAppState{
droppedFiles: File[];
}我在我的构造函数中初始化了它，如下所示：
constructor(props: {}) {
super(props);
this.state = {
droppedFiles: []
}
}最后，为了更新我的状态，我从FileList中提取了每一项：
private handleDrop = (files:FileList, event:ReactDragEvent<HTMLDivElement>) => {
// Create an array from the FileList (as this is an array-like object)
const filesArr: File[] = Array.from(files);
// Update the state with our new array
this.setState({
droppedFiles: filesArr
});
}这解决了我的问题。谢谢你把我带到正确的道路上，埃斯特斯。太棒了。
回答 1
Stack Overflow用户
发布于 2018-12-05 21:57:13
这个问题不能外推到任何情况。在此特定情况下，如果无法提供属性的初始值，则应将属性设置为可选：
export interface IAppState{
value:string;
droppedFiles?: FileList
}这意味着在使用droppedFiles的地方，它可以是FileList或undefined，它可能需要if (this.state.droppedFiles) ...检查，等等。
在这种特定情况下，另一个选择是不使用FileList对象(类似于数组)，而是存储File对象的数组：
export interface IAppState{
value:string;
droppedFiles: File[]
}
...
this.state = { droppedFiles: [], ... }
...
this.setState({ droppedFiles: Array.from(files) });https://stackoverflow.com/questions/53633528
复制相似问题
腾讯云开发者
