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

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 的图像组件采用 url 而不是您传递的图像数据。请参考下面的问题。

旧答案

I always get printed the icon of image, and I don't want that

是因为你的情况

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

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

你应该使用

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

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

How to update the image when state is updated?

javascript

reactjs

chakra-ui

更新

旧答案