如何从 api 渲染数组数据？

Question

我想从已经在数组中的api渲染DetectedText，那么如何渲染它或者下面的渲染方法是反应代码

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




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

    handleSubmit(e) {

        e.preventDefault();


        var byteCode = this.state.imagePreviewUrl.substring((e.target.value).indexOf(',') + 23);

        console.log('base64 byte code substring data', byteCode);


        let url = "http://192.168.4.138/MediaAnalysisImage_Amazon/api/DetectText/DetectText"
            console.log(url);
            const data = {  "fileByte": byteCode }


            console.log(data)

            const response = axios.post(url, data)
                .then(response => {
                    this.setState({
                        change: response,
                        byteArr: response.data.fileByte,
                        jsonData: response.data.jsondata.replace(/[&\/\\#+()$"~%.'*?<>{}]/g, ''),

                        path: response.data.jsondata.Confidence


                    });
                    console.log('Byte data', this.state.byteArr)
                    console.log('json detected data', response.data.jsondata.DetectedText)
                })




    }

    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() {
        const img = "data:image/png;base64" + ',' + this.state.byteArr
        let { imagePreviewUrl } = this.state;

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

        return (
            <div className="wrapper">
                <h2 className="text-center heading" >Text Recognization</h2>
                <div className="container ">

                    <section className="celeb">
                        <form className="Fform bg-light mb-4">

                            <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 mb-4">
                                <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)} class="btn btn-secondary" />
                            </div>
                            <button className="btn btn-success"
                                type="submit"
                                onClick={(e) => this.handleSubmit(e)}>Upload Image</button>
                        </form>
                        <hr></hr>
                        <div className="row grid">
                            <div className="col-md-6">
                                <h3>Input Image</h3>
                                {$imagePreview}
                            </div>
                            <div className="col-md-6">
                                <h3>Output Image</h3>



                                <img src={img} className="img-responsive imgp" />
                            </div>
                        </div>
                        <div>
                            <hr></hr>

                            <h4>Description </h4>
                            <table className="table table-hover">
                                <tr>
                                    <th ><label>Name :- </label></th>
                                    <td>{this.state.jsonData}</td>


                                </tr>
                            </table>


                        </div>
                    </section>
                </div>
            </div>
        )
    }
}
export default Image;

下面是api返回数据和添加api返回数据的图像，所以请检查并告诉我应该做些什么改变

api return data 只需查看标记的文本，即 DetectedText 并告诉我如何呈现它

Answer 1

首先使用JSON.parse它会转换你的数据哟数组对象然后循环遍历你的所有数据并做剩下的事情

var data = {
    "filename": null,
    "fileByte": "", // ur response data 
    "jsondata": "" // ur response data
}

var parseData = JSON.parse(data.jsondata)
console.log(parseData)
var DetectedText = []
for (x of parseData) {
  console.log(x) // all the data
  console.log(x.Confidence) // single one
  console.log(x.DetectedText)
  DetectedText.push(x.DetectedText)
}
console.log(DetectedText)
this.setState({dText:DetectedText })

然后循环你的 DetectedText 在rende里面 希望对您有所帮助，如有需要请告知