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 = [
  { 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。
仍然为密钥获取唯一 ID 的选项是：

• 在反应中创建单元格或行时，以时间戳的形式为单元格/行提供唯一的 ID。从数据库取回响应后，将时间戳替换为官方数据库密钥。 （这是您进行乐观更新的时候：暂时显示新行，直到数据库为您提供正式的行）。
• 不显示行/单元格，直到您从具有官方 ID 的服务器返回响应
• 通过散列所有单元格/行内容的内容创建唯一键（如果您非常确定单元格/行内容不太可能相同）

希望这会有所帮助。

Answer 2

您需要将row 传递给单元格渲染方法：

  {rows.map((row, index) => this.state.isEditing ?
       <RowForm formKey={index} key={index} editStop={this.editStop} handleSubmit={this.handleSubmit} /> :
       <tr key={index}>
         {(row.cellValues || []).map((value, index) => {
            return (
                <Cells key={index} value={value.contents} />
          )})
         }
         <td>
           <button className="btn btn-primary" onClick={this.handleEdit.bind(this, row)}><i className="fa fa-pencil"></i>Edit</button>
         </td>
       </tr>
  )} 

希望对您有所帮助！