如何将文件设置为 React 状态

Question

我目前正在使用需要“handFileChange”方法的 React FilePicker 工具。 在该方法中，我试图将我的反应状态中的文件变量设置为用作该方法参数的文件。

我还试图实现一个将返回当前文件的 getter 方法。 但是，当我从 getter 方法转到 console.log 文件时，我得到一个空行

有什么建议？ 谢谢

Answer 1

setState()不是同步的，请改用它的回调

setState(
  { file: [file] },
  () => console.log(this.state.file)
);

将 setState() 视为更新组件的请求而不是立即命令。 为了获得更好的感知性能，React 可能会延迟它，然后一次更新多个组件。 React 不保证状态更改会立即应用。

setState() 并不总是立即更新组件...

https://reactjs.org/docs/react-component.html#setstate

Answer 2

随着 React 的官方文档： https : //en.reactjs.org/docs/react-component.html#setstate

setState() 并不总是立即更新组件。 它可能会批量更新或推迟更新。 这使得在调用 setState() 后立即读取 this.state 成为一个潜在的陷阱。 相反，请使用 componentDidUpdate 或 setState 回调 (setState(updater, callback))，这两者都保证在应用更新后触发。 如果您需要根据之前的状态设置状态，请阅读下面的更新程序参数。

您必须在此处使用函数回调：

setState(stateChange[, callback])

例子 ：

setState({file: [file]}, () => { console.log(this.state.file) });

此外，如果你想调试和观察组件的状态和道具。 我推荐你使用 React Developer Tool。 它更容易https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi