首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React设置默认状态

React设置默认状态
EN

Stack Overflow用户
提问于 2018-12-05 21:32:30
回答 1查看 4.1K关注 0票数 1

我正在寻找一些关于在react中设置默认状态的指导。我有一个使用typescript & react的简单项目,它允许将文件拖放到div上。我正在尝试将这些文件存储在状态中,但在设置默认状态时遇到了问题。

代码语言:javascript
复制
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[]。为了解决这个问题,我更新了我的界面:

代码语言:javascript
复制
export interface IAppState{    
    droppedFiles: File[];
}

我在我的构造函数中初始化了它,如下所示:

代码语言:javascript
复制
constructor(props: {}) {
    super(props);
    this.state = {
      droppedFiles: []      
    }
}

最后,为了更新我的状态,我从FileList中提取了每一项:

代码语言:javascript
复制
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
        });
      }

这解决了我的问题。谢谢你把我带到正确的道路上,埃斯特斯。太棒了。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-05 21:57:13

这个问题不能外推到任何情况。在此特定情况下,如果无法提供属性的初始值,则应将属性设置为可选:

代码语言:javascript
复制
export interface IAppState{
    value:string;
    droppedFiles?: FileList
}

这意味着在使用droppedFiles的地方,它可以是FileListundefined,它可能需要if (this.state.droppedFiles) ...检查,等等。

在这种特定情况下,另一个选择是不使用FileList对象(类似于数组),而是存储File对象的数组:

代码语言:javascript
复制
export interface IAppState{
    value:string;
    droppedFiles: File[]
}

...

this.state = { droppedFiles: [], ... }

...

this.setState({ droppedFiles: Array.from(files) });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53633528

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档