嘿，誰能告訴我為什么我不從 api 渲染數據

Question

我是新手，所以請給我以下問題的解決方案

im creating api where user can add image and select the radio btn and send data to api get the revelwnt data of image but in if condition axios display error in cosole ie axios is not defined due to this im not able to map the data from 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 錯誤圖像

Answer 1

首先你可以安裝這個package，

npm i axios --save

然后再次運行您的應用程序。