Question

我正在构建用于在网站上显示产品的网格订单工具。它接收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

Answer 1

您可以创建一个映射您的集合并返回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

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

1 个答案: