关于在 React 功能组件中读取文件内容和 useState 钩子

Question

如果您看到控制台日志，在第 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;

Answer 1

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

关于在 React 功能组件中读取文件内容和 useState 钩子

Regarding reading the contents of a file and useState hook in react functional component

javascript

reactjs

buffer

filereader

use-state