reactjs - React - 将数据映射到映射函数期间形成的行

Question

我有一个名为 Cells 的组件，它使用从助焊剂存储中获取的数据进行渲染。我的问题是我想将此数据呈现到特定行，但由于我呈现行的方式(它们是动态的，因此您可以将它们添加到表中)，我正在努力为单元格组件提供行标识符可以渲染成.我希望这是有道理的!

这是代码:

单元格组件:

import React from 'react';

export default class Cells extends React.Component {
    render() {
        return (
            <td>{this.props.value}</td>
        );
    }
}

表格组件:

    import React from 'react';
    import TableHeader from './TableHeader.jsx';
    import Cells from './Cells.jsx';
    import RowForm from './RowForm.jsx';
    import {createRow} from '../../actions/DALIActions';
    import AppStore from '../../stores/AppStore';

    export default class Table extends React.Component {
        state = {rows: [], cellValues: [], isNew: false, isEditing: false};
        updateState = () => this.setState({cellValues: AppStore.getCellValues()});

        componentWillMount() {
            AppStore.addChangeListener(this.updateState);
        }

        handleAddRowClickEvent = () => {
            let rows = this.state.rows;
            rows.push({isNew: true});
            this.setState({rows: rows});
        };

        handleEdit = (row) => {
            this.setState({isEditing: true});
        };

        editStop = () => {
            this.setState({isEditing: false});
        };

        handleSubmit = (access_token, id, dataEntriesArray) => {
            createRow(access_token, id, dataEntriesArray);
        };

        componentWillUnmount() {
            AppStore.removeChangeListener(this.updateState);
        }

        render() {

            let {rows, cellValues, isNew, isEditing} = this.state;

            let headerArray = AppStore.getTable().columns;

            let cells = this.state.cellValues.map((value, index) => {
                return (
                    <Cells key={index} value={value.contents} />
                );
            });

            return (
                <div>
                    <div className="row" id="table-row">
                        <table className="table table-striped">
                            <thead>
                                <TableHeader />
                            </thead>
                            <tbody>
//////////// This is where the render of the data would happen/////////////
                                {rows.map((row, index) => this.state.isEditing ?
                                    <RowForm formKey={index} key={index} editStop={this.editStop} handleSubmit={this.handleSubmit} /> :
                                    <tr key={index}>
                                        {this.state.cellValues ? cells : null}
                                        <td>
                                            <button className="btn btn-primary" onClick={this.handleEdit.bind(this, row)}><i className="fa fa-pencil"></i>Edit</button>
                                        </td>
                                    </tr>
                                )} 
                   ///////////////End/////////////////
                            </tbody>
                        </table>
                    </div>
                    <div className="row">
                        <div className="col-xs-12 de-button">
                            <button type="button" className="btn btn-success" onClick={this.handleAddRowClickEvent}>Add Row</button>
                        </div>
                    </div>
                </div>
            );
        }
    }

我知道这可能不是实现我想要的目标的最佳方式(对此的任何提示也将不胜感激)，但这是我目前必须处理的!

任何帮助，尤其是示例，我们将不胜感激!

感谢您的宝贵时间!

Answer 1

我建议您将单元格数据放在某些行中的单个行数据中，而不是使用一个包含行标题的对象( rows )和另一个包含所有行的所有单元格的对象( cellvalues )。方式，这样你的数据结构就会像这样:

rows = [
  { rowID: 100, cells: [
      { cellID: 101, value: 'data' },
      { cellID: 102, value: 'data' }
    ]
  },
  { rowID: 200, cells: [
      { cellID: 201, value: 'data' },
      { cellID: 202, value: 'data' }
    ]
  }
]

这样，您就可以传递每行的 cellValues，这样您就可以在每行拥有不同的单元格。

为<Row>创建一个单独的组件，呈现:

return 
  <tr>
    {this.props.cells.map( cell => { 
        return <Cell key={cell.cellID} value={cell.value} />
    })}
  </tr>

并更改<tr>主渲染中的位:

<Row key={row.keyID} cells={row.cells}/>

最后:使用键索引是一个坏主意，如 key={i} 所示。 。使用唯一标识单元格/行的内容的键。

更新:典型的情况是单元格或行首先在前端创建，只有在发布到数据库后才获取其数据库 ID。
仍然获取 key 唯一 ID 的选项有:

• 在React中创建单元格或行后，以时间戳的形式为单元格/行提供唯一的ID。从数据库返回响应后，将时间戳替换为官方数据库 key 。 (这是当您进行乐观更新时:暂时显示新行，直到数据库为您提供正式行)。
• 不要显示行/单元格，直到您从服务器收到带有官方 ID 的响应
• 通过散列所有单元格/行内容的内容来创建唯一键(如果您非常确定单元格/行内容不可能相同)

希望这有帮助。