时间戳

首页 > 解决方案 > 在 React 中，如何获取状态到 UI 中，然后通过数组对象进行映射

reactjs - 在 React 中，如何获取状态到 UI 中，然后通过数组对象进行映射

问题描述

我正在为网站上的产品展示构建一个网格订购工具。它接收一个 CSV，将其解析为 JSON，允许用户对其重新排序，然后保存新的 CSV。因为我将数组对象保存在状态中，所以我有两个问题。上传文件后，我设法使数组对象进入状态。这个问题有两个部分。

1）如何将状态输入用户界面？2）然后我将不得不映射一个对象数组

    import React, { Component } from 'react'
    import Papa from 'papaparse'

    class Product extends Component {
        constructor(props) {
            super(props);
            this.state = {data: [] };   
            this.handleChange = this.handleChange.bind(this);
            this.updateData = this.updateData.bind(this)
        }

        handleChange(event) {
            event.preventDefault()
            const inventory = event.target.files[0]
            Papa.parse(inventory, {
                header: true,
                complete: this.updateData
            })
        } // END

        updateData(results) {
            const data = results.data
            console.log(data)
            this.setState({data}) // I have it in state. How to get it in UI?
        }

        render() {
            return (
                <div>
                    <form >
                        <label>
                            Upload file:
                            <input type="file" onChange={this.handleChange} />
                        </label>
                    </form>

                    <div> Map through state here </div> 
                </div>          
            );
        }

    } // END

    export default Product

标签： reactjsstate

解决方案

您可以创建一个映射集合并返回 UI 组件数组的方法。然后在组件的 return 语句中呈现它们。

import React, { Component } from 'react'
import Papa from 'papaparse'

class Product extends Component {
    constructor(props) {
        super(props);
        this.state = {data: [] };   
        this.handleChange = this.handleChange.bind(this);
        this.updateData = this.updateData.bind(this);
        this.renderData = this.renderData.bind(this);
    }

    handleChange(event) {
        event.preventDefault()
        const inventory = event.target.files[0]
        Papa.parse(inventory, {
            header: true,
            complete: this.updateData
        })
    } // END

    updateData(results) {
        const data = results.data
        console.log(data)
        this.setState({data}) // I have it in state. How to get it in UI?
    }

    // method that check data prop in state for items in array, 
    // returning a collection of UI components if there is, 
    // otherwise returns null
    renderData() {
        return this.state.data.length > 1 
            ? this.state.data.map((item) => (
                <div>{item.title}</div> // assuming your data item has a title prop
            )) 
            : null;
    }

    render() {
        return (
            <div>
                <form >
                    <label>
                        Upload file:
                        <input type="file" onChange={this.handleChange} />
                    </label>
                </form>

                <div> 
                    {/* execute method here */}
                    {this.renderData()} 
                </div> 
            </div>          
        );
    }

} // END

export default Product

推荐阅读