javascript - 嘿谁能告诉我为什么我不从 api 渲染数据

Question

我是 React 新手，所以请给我以下问题的解决方案

我正在创建api，用户可以在其中添加图像并选择 radio btn并将数据发送到api获取图像的revelwnt数据，但在if条件下axios在cosole中显示错误，即axios未定义，因为我无法映射来自 api 的数据，所以有人告诉我哪里是错误的方法

import React, { Component } from 'react';
import axios from 'axios'

class Image extends Component {
    constructor(props) {
        super(props);
        this.state = { file: '', imagePreviewUrl: '' , change: [],  path:"false"};
    }

    handleSubmit(e) {
        e.preventDefault();
        // TODO: do something with -> this.state.file
        const byteCode = this.state.imagePreviewUrl
        var byteCode = this.state.imagePreviewUrl.substring(0, 30, e.target.value.indexOf(''));
        // substring used for remove "data:image/png;base64," from img src tag on line no 56 to pass base64 value to api
        debugger;

        var byteCode = this.state.imagePreviewUrl.substring((e.target.value).indexOf(',') + 23);
        console.log('base64 byte code substring data', byteCode);
        const valueRadio = this.state.selectedOption

        console.log(valueRadio)
        if (valueRadio == "celeb") {
            let url = "http://192.168.4.138/MediaAnalysisImage_Amazon/api/IdentifyCelebrity/IdentifyCelebrity"
            console.log(url);
            const data = { "isFilePath":this.state.path, "fileByte": byteCode}


            console.log(data)

            const response = axios.post(url, data)
                .then(response => {
                this.setState({
                    change: response.data
                });
            })
        }


    }
    celebData() {

        return (this.state.change).map((celebrity) => {
            const filebyte = celebrity.fileByte
            return (
                <div>
                    <p>{filebyte}</p>
                </div>
                )
        })
    }
    radioChange=(e)=> {
        this.setState({
            selectedOption: e.target.value

        });

    }
    handleImageChange(e) {
        e.preventDefault();

        let reader = new FileReader();
        let file = e.target.files[0];


        reader.onloadend = () => {
            this.setState({
                file: file,
                imagePreviewUrl: reader.result


            });

        }

        reader.readAsDataURL(file)

    }

    render() {
        let { imagePreviewUrl } = this.state;

        let $imagePreview = null;
        if (imagePreviewUrl) {
            $imagePreview = (<img src={imagePreviewUrl}   width="20%" />);
            console.log(imagePreviewUrl)
        } else {
            $imagePreview = (<span className="previewText">Please select an Image for Preview</span>);
        }

        return (
            <div className="previewComponent">
                <form onSubmit={(e) => this.handleSubmit(e)}>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="radio" class="form-check-input" name="optradio" value="face" onChange={this.radioChange}/>Face
                         </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="radio" class="form-check-input" name="optradio" value="celeb" onChange={this.radioChange} />Celeb
                         </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="radio" class="form-check-input" name="optradio" value="text" onChange={this.radioChange} />Text
                         </label>
                    </div>
                    <div class="form-group">
                    <input className="fileInput"
                        type="file"
                            onChange={(e) => this.handleImageChange(e)} />
                        </div>
                    <button className="submitButton"
                        type="submit"
                        onClick={(e) => this.handleSubmit(e)}>Upload Image</button>
                </form>
                <div className="row">
                <div className="col-md-6">
                    <h2>Input Image</h2>
                    {$imagePreview}                
                </div>
                <div className="col-md-6">
                        <h2>Output Image</h2>

                    </div>
                </div>
                <div>
                    {this.celebData()}
                    <h4>Description :-</h4>
                </div>

        </div>
        )
    }
}
export default Image;

下面是package.json代码

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.4.2",
    "antd": "^3.23.3",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "react": "^16.9.0",
    "react-bootstrap": "^1.0.0-beta.12",
    "react-dom": "^16.9.0",
    "react-js-pagination": "^3.0.2",
    "react-paginate": "^6.3.0",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
    "reactstrap": "^8.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

并在控制台中显示 axios is not Defined 错误 axios error image

Answer 1

首先你可以安装这个包，

npm i axios --save

然后再次运行您的应用。