React从Node.js获取Base64图片时setState报错‘undefined’的问题排查

你的问题根源在于函数组件和类组件的状态更新方式混淆，加上状态声明的小疏忽，具体原因拆解如下：

• 错误使用类组件的this.setState语法：你写的是React函数式组件（function File() { ... }），函数组件里没有this上下文，自然找不到this.setState——这个方法是React类组件专属的。
• 状态声明时未获取更新函数：你写了const [image] = useState("");，但useState返回的是包含「状态值」和「更新状态的函数」的数组，你只解构了第一个值，没拿到用来更新状态的setImage函数。

另外，你的代码还有两个潜在问题需要修正：

1. getImage()直接写在组件顶层，会导致组件每次渲染都调用这个接口，大概率触发无限循环；
2. axios请求返回的结果里，后端数据存在result.data中，你直接用result会拿到整个axios响应对象，不是后端返回的图片数据。

Fileupload.js #

import React, { useState, useEffect } from "react";
import "./App.css";
import axios from 'axios';

function File() {
  // 修正：同时解构出状态值和更新函数
  const [image, setImage] = useState("");

  const uploadImage = async (e) => {
    const file = e.target.files[0];
    const base64 = await convertBase64(file);
    window.bs64 = base64;
    //setBaseImage(base64);
  };

  const convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        resolve(fileReader.result);
      };
      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };

  const saveImage = () => {
    axios.post("http://localhost:3001/api/image",{
      imgName: window.bs64,
    });
  };

  const getImage = async () => {
    console.log('getImage');
    try {
      const result = await axios.get(`http://localhost:3001/api/showallimages`);
      // 修正：用useState返回的setImage更新状态，并且取result.data拿到后端返回的数组
      // 这里假设你想展示第一个图片的base64，根据实际需求调整
      if (result.data.length > 0) {
        setImage(result.data[0].imgName);
      }
      console.log(result.data);
    } catch (err) {
      console.error('获取图片失败:', err);
    }
  };

  // 修正：用useEffect包裹getImage，空依赖数组确保只在组件挂载时调用一次
  useEffect(() => {
    getImage();
  }, []);

  return (
    <div className="App">
      <input type="file" onChange={(e) => { uploadImage(e); }} />
      <button onClick={saveImage}>Save</button>
      <br/>
      {/* 新增：展示图片，如果image有值的话 */}
      {image && <img src={image} alt="获取到的图片" style={{maxWidth: '300px'}} />}
    </div>
  );
}

export default File;

Server.js（修正端口日志不一致问题） #

app.get('/api/showallimages',(req,res)=>{
  mysqlConnection.query('SELECT * FROM imagetb',(err,rows,fields)=>{
    if(!err)
      res.send(rows);
    else
      console.log(err);
  })
});
app.listen(3001, () => {
  console.log("Server Running On 3001"); // 修正端口号日志，和实际监听端口一致
});

1. 把const [image] = useState("");改成const [image, setImage] = useState("");，拿到状态更新函数；
2. 把this.setState({image: result});改成setImage(对应的数据);，使用函数组件的状态更新方式；
3. 用useEffect(() => { getImage(); }, []);包裹接口调用，避免无限渲染；
4. 访问result.data获取后端返回的实际数据，而非整个axios响应对象；
5. 新增图片展示DOM，当image状态有值时渲染图片。

内容的提问来源于stack exchange，提问作者Letter