Question

我有一个用例，您能帮助我了解在什么时候执行回调setState方法和普通setState方法，这两个与执行点有何不同？

handleselectedFile = event => {
  this.setState((prevState, props) => {
    return {

      selectedFile: event.target.files[0],
      loaded: 0,
      fileName: event.target.files[0].name
      };
    }
  })
};

触发事件并由子类调用方法并将事件传递给执行上述方法的父类时。

上面的方法抛出此错误：

“ TypeError：无法读取null的属性“文件””

如果我将上述setState回调方法替换为普通的setState方法，则一切正常。

handleselectedFile = event => {
  this.setState({
    selectedFile: event.target.files[0],
    loaded: 0,
    fileName: event.target.files[0].name
  })
};

任何帮助将不胜感激，这是什么原因造成的。我进行了很多搜索，但找不到任何相关内容，或者可能是不了解解决方案。

阅读这篇文章，但无法理解我的情况的问题：When to use React setState callback

Answer 1

可能缺少功能方括号

 handleselectedFile = event => {
      this.setState((prevState, props) => { <-- here
        return {

          selectedFile: event.target.files[0],
          loaded: 0,
          fileName: event.target.files[0].name
        };
      })
    };

Answer 2

  try this way     
  handleselectedFile = event => {
     this.setState({

      selectedFile: event.target.files[0],
      loaded: 0,
      fileName: event.target.files[0].name
    },(prevState, props) =>(console.log(prevState,props)))
  };

为什么带有回调函数的setState会出现错误：“ TypeError：无法读取null的属性'files'”，而普通的setState方法却可以正常工作？

2 个答案: