如何保存布局以在每次重新渲染时声明？

Question

I am working on an application that changes the order of a product grid by rearranging tiles. (It is like Packery). I have a renderData function that populates the layout grid with data from a file input. That is working fine. The part that I am struggling with, is how then do I save that "layout" - by that I mean the order of the items - how do I save that to state?

When the user re-sorts the times in the UI, I want that layout array to change to reflect the new order.

It seems so simple, but I just haven't seen yet how to do it.

import React, { Component } from 'react'
import Papa from 'papaparse'
import GridLayout from 'react-grid-layout' 
import {
    Jumbotron,
    Container,
    Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
    UncontrolledDropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem,
    Button,
    Input,
} from 'reactstrap'

import '../node_modules/react-grid-layout/css/styles.css'
import '../node_modules/react-resizable/css/styles.css'
import './App.css'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [], // on load
            isOpen: false,
        };  

        this.toggle = this.toggle.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.updateData = this.updateData.bind(this)
        this.renderData = this.renderData.bind(this)       
    }

    toggle() {
        this.setState({
          isOpen: !this.state.isOpen
        });
      }

    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
        this.setState({data}) // {data:data}
    }

    renderData() {
        return  this.state.data.map((item,index) => (  
                    <div className="react-grid-item grid-item" key={item.sku} data-grid={{x: index % 3, y: Math.floor(index / 3), w: 1, h: 1}}>
                        <div> {item.name} </div>
                        <div> {item.gridorder} </div>
                        <div> {item.designer} </div>
                        <img src={item.image} alt="product" />
                        <div> {item.sku} </div>
                        <div> {index} </div>     
                    </div>    
                )) 
    } 

    // QUESTION: How do I save this layout to state each time it rerenders? 

    // NOTE: on click of export button, I want to pass that reordered layout held in state to handleClick and parse it back to CSV
    // handleClick(event) {
    //     Papa.unparse({

    //     })
    // }

    render() {

        return (
            <div>
                <Navbar color="dark" dark expand="md">
                    <NavbarBrand href="/">GO App - grid order tool</NavbarBrand>
                    <NavbarToggler onClick={this.toggle} />
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="ml-auto" navbar>
                        <NavItem>
                            <NavLink href="/components/">Components</NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
                        </NavItem>
                        <UncontrolledDropdown nav inNavbar>
                            <DropdownToggle nav caret>
                            Options
                            </DropdownToggle>
                            <DropdownMenu right>
                            <DropdownItem>
                                Option 1
                            </DropdownItem>
                            <DropdownItem>
                                Option 2
                            </DropdownItem>
                            <DropdownItem divider />
                            <DropdownItem>
                                Reset
                            </DropdownItem>
                            </DropdownMenu>
                        </UncontrolledDropdown>
                        </Nav>
                    </Collapse>
                </Navbar>

                <Jumbotron >
                    <Container>
                        <h4> Import CSV </h4>
                    <Input type="file" onChange={this.handleChange}  />
                    </Container>
                </Jumbotron>

                <Container className="album ">
                    <div className="note" > BUG: Drag tiles from text, not image </div>
                    <div className="note" > BUG: Drag order will be changed </div>

                    <GridLayout  compactType="horizontal" useCSSTransforms={true} cols={3} margin={[120, 20]} rowHeight={300} className="react-grid-layout grid" width={1200} >
                        {this.renderData()}
                    </GridLayout>

                    <Navbar color="light" light expand="md">
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="ml-auto" navbar>
                        <NavItem>
                            <div className="note" > NOTE: The export function is under construction </div>
                            <Button onClick={this.handleClick} color="secondary" size="sm">Export CSV</Button>
                        </NavItem>

                        </Nav>
                    </Collapse>
                </Navbar>

                </Container>
            </div> // END
        );
    }
} // END

export default App

Answer 1

You can move the state one component above and make the grid display of itens a functional component that only receives an array and display the grid.

With that said, to sort the list, on the parent component, you call the

this.setState({data: this.state.data.sort(...)})

and pass this to the child that expects an array to display the grid. So the render method on the parent component should be:

render () {
 const { data } = this.state;

 return (
   <ChildComponent itensList={data} />
 );
}