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

Posted 2023-02-21

【中文标题】关于在反应功能组件中读取文件内容和useState钩子[重复]

【英文标题】：Regarding reading the contents of a file and useState hook in react functional component [duplicate]

【发布时间】：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]);。

【参考方案1】：

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