Question

我正在寻找一些有关在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步骤中删除了dropFiles，则显然将其标记为找不到值。由于TypeScript的类型安全性，它不会接受{}。初始化/设置复杂类型的默认值的正确方法是什么？

我的主要问题是我遇到来自打字稿的错误，因为我不知道如何使用正确的数据初始化state.droppedFiles属性。我不想在构造函数中为其分配任何数据，而是在用户实际删除文件时执行。我只是在寻找让TS知道该状态具有类型为'FileList'的'droppedFiles'属性的正确方法： 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
        });
      }

这已解决了我的问题。感谢您将我置于正确的方向。荣誉。

Answer 1

该问题不能外推至任何情况。在这种特定情况下，如果无法提供属性的初始值，则应将属性设为可选：

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) });

反应设置默认状态

1 个答案: