关于在反应功能组件中读取文件内容和useState钩子[重复]答案

【问题标题】：Regarding reading the contents of a file and useState hook in react functional component [duplicate]关于在反应功能组件中读取文件内容和useState钩子[重复]
【发布时间】：2021-11-03 21:36:21
【问题描述】：

如果您看到控制台日志，在第 21 行缓冲区变量显示未定义，即使在控制台记录缓冲区之前调用了 setBuffer。 App组件的return语句中的第26行控制台日志在文件的onChange之后显示正常。为什么第 21 行的控制台日志即使在 onChange 之后仍显示未定义？！

import './App.css';
import React, { useState } from 'react';
import ButtonMeta from './components/Button';
const { create } = require('ipfs-http-client');

const ipfsClient = create('https://ipfs.infura.io:5001/api/v0');

const App = () => {
  const [buffer, setBuffer] = useState(null);

  const captureFile = (event) => {
    event.preventDefault();
    const file = event.target.files[0];
    const reader = new window.FileReader();
    reader.readAsArrayBuffer(file);

    reader.onloadend = () => {
      const b = Buffer(reader.result);
      console.log('buffer', Buffer(reader.result));
      setBuffer(b);
      console.log(buffer);
    };
  };

  return (
    <div className='App'>
      {console.log(buffer)}
      <input type='file' onChange={captureFile} />
      <ButtonMeta>Submit</ButtonMeta>
    </div>
  );
};

export default App;

【问题讨论】：

状态更新通常是异步批处理的任务队列，因此此时状态将为undefined。在功能组件中，您可以使用useEffect 记录状态发生变化时：useEffect(() => console.log(buffer), [buffer]);。

标签： javascript reactjs buffer filereader use-state

【解决方案1】：

状态更新是一个异步调用。因此，当您在第 21 行尝试“console.log”时，Value 尚未更新，因此显示为 undefined

【讨论】：