javascript - 如何渲染for循环中的数据？

Question

我想从 API 渲染数据，我通过 for 循环渲染它，但是当我将其显示到 UI 时，它只显示 1 个值。

规范:-当用户上传文本图像时，API 显示图像中存在的文本和名称，这是 JSON 数据是一个数组，因此我使用 for 渲染 DetectedText 值形式 API循环但无法在 UI 中显示 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: [], dText: [] };
    }

    handleSubmit(e) {
        e.preventDefault();
        var byteCode = this.state.imagePreviewUrl.substring((e.target.value).indexOf(',') + 23);
        let url = "http://192.168.4.138/MediaAnalysisImage_Amazon/api/DetectText/DetectText";
        const data = { "fileByte": byteCode }
        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.DetectedText,
                });          
                console.log('json detected data', this.state.jsonData)

                const parseData = JSON.parse(response.data.jsondata)
                let x = ""
                for (let x of parseData) {
                    const DetectedText = x.DetectedText
                    this.setState({
                        dText: DetectedText
                    })
                    console.log('setting dtext', this.state.dText)
                }
            })
    }

    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" />);        
        } 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-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.dText}</td>
                                </tr>
                            </table>
                        </div>
                    </section>
                </div>
            </div>
        )
    }
}
export default Image;

Answer 1

你可以这样改变:

this.setState({
    dText: parseData.map(x => x.DetectedText),
})

并在您的 render 方法中:

<td>{ this.state.dText.map((text, index) => <div key={index}>{text}</div>) }</td>