状态更新时如何更新图像？

Question

我正在查询 API 以获取图像作为响应。我想在状态更新时显示图像。另一个问题是，当我没有图像时，我总是会打印图像的图标，我不希望这样。我试图用这段代码解决这个问题，但我仍然无法获得我想要的行为。

更清楚地说，我希望在提交表单时，我会收到带有图像的响应。我用setImage 更新状态，我希望在页面上绘制图像。

import React from 'react'
import {
    VStack,
    Button,
    Wrap,
    WrapItem,
    Center,
    Input,
    Image,
    Box
} from '@chakra-ui/react'

const axios = require('axios').default
const Endpoint = 'http://localhost:5000/'
const ImageContext = React.createContext(null)

function Predict() {
    const [image, setImage] = React.useState(null)
    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);
        const xmin = formData.get('xmin');
        const xmax = formData.get('xmax');
        const ymin = formData.get('ymin');
        const ymax = formData.get('ymax');
        formData.delete('xmin');
        formData.delete('xmax');
        formData.delete('ymin');
        formData.delete('ymax');
        axios.post(Endpoint + 'predict', formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    params: {
                        xmin,
                        ymin,
                        xmax,
                        ymax,
                    }
                }
        ).then(response => setImage(response.data))
    }
      return (
      <VStack>
      <form onSubmit={handleSubmit}>
          <Wrap spacing='30px'>
              <WrapItem>
                <Input placeholder='xmin' name="xmin"  />
              </WrapItem>
              <WrapItem>
                <Input placeholder='ymin' name="ymin" />
              </WrapItem>
              <WrapItem>
                <Input placeholder='xmax' name="xmax" />
              </WrapItem>
              <WrapItem>
                <Input placeholder='ymax' name="ymax" />
              </WrapItem>
          </Wrap>
          <br />
          <Input type='file' name="file"/>
          <Input type='submit' value='Submit'/>
      </form>

      <ImageContext.Provider value={{image}}>
      <Box boxSize='sm'>
        {image ? <Image src={image}/> : null }
      </Box>
      </ImageContext.Provider>
      </VStack>
      )
}

export default Predict

提前致谢！

编辑 我用createContext和useState的默认值解决了这个问题，将它们设置为null，但情节仍然被诅咒。

我的 response.data 是这样的：

我没有粘贴这些字符，因为这里似乎无法读取它们

Answer 1

更新

Chakra UI 的 Image 组件采用 url 而不是您传递的 Image 数据。请参阅以下问题了解您的情况。

How to display binary data as image in React?

---

旧答案

我总是打印图像的图标，我不希望这样

因为你的条件

{image ? <Image src={image}/> : null }

总是正确的。 image 是一个列表，而不是布尔值。

你应该使用

{!!image.length ? <Image src={image}/> : null }