使用 map() 和 JSX 渲染數據數組

Question

我正在嘗試使用 jsx 渲染一個數組，該數組內部有一個跨度，當嘗試渲染它時，output 是 [object Object] 我正在嘗試在里面添加一個工具提示，你能幫我理解為什么會這樣嗎？ 我正在使用帶有 react-bootstrap-table-plus 庫的 BootstrapTable

我的代碼：

<DataTableConfigurator
    data={
        this.props.configuracion.map(d => {
            var s = d.servicios[0].fechaultimaactualizacion;
            var ds = moment(s, 'DD - MM - YYYY HH:mm');
            var fecha = ds.format('DD/MM/YYYY');
            return {

                NOMBRE: <a key={d.ID_TIPO_CONF} data-toggle="tooltip" title={["Última fecha actualización :" + fecha]}>{d.nombredivision} </a>,
                ID_TIPO_CONF: d.iD_TIPO_CONFIGURACION == 1 ? 'Manual' : 'Automática',


            }
        }
    }
>

我的 DataTableConfigurator 的屬性：

class DataTableProperties extends PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            originalData: this.props.data,
            cloneData: [...this.props.data],
            searchFilterValue: '',
            noDataMessage: this.props.noDataMessage,
            page: 1,
            sizePerPage: this.props.sizePerPage || 5
        };
    }
   

    componentWillUpdate(prevProps) {
        if (prevProps.data.length != this.state.originalData.length) {
            this.cloneOriginalData(prevProps.data);
        } else {
            if (prevProps.data.length != 0) {
                var obj = [];
                for (var i = 0; i < prevProps.data.length; i++) {
                    var e = prevProps.data[i];
                    if (e[Object.keys(e)[0]] != this.state.originalData[i][Object.keys(e)[0]]) {
                        this.cloneOriginalData(prevProps.data);
                        break;
                    }
                }
                //if (obj.length != 0) {
                    
                //}
            }
        }
    }

    componentWillUnmount() {
        this.setState({
            originalData: [],
            cloneData: [],
            searchFilterValue: '',
            noDataMessage: '',
            page: 1
        });
    }

    cloneOriginalData = data => {
        var originalData = data;
        var cloneData = [...originalData];
        this.setState({ originalData, cloneData });
    }

    searchFilter = input => {
        var searchFilterValue = input.target.value;;
        var originalData = this.state.originalData;
        var cloneData = [];

        if (searchFilterValue != '') {
            for (var i = 0; i < originalData.length; i++) {
                var row = originalData[i];
                var keys = Object.keys(row);

                for (var j = 0; j < keys.length; j++) {
                    var cell = row[keys[j]];
                    if (typeof cell !== 'object') {
                        cell = String(cell).toLowerCase();
                        if (cell.indexOf(searchFilterValue.toLowerCase()) > -1) {
                            cloneData.push(row);
                            break;
                        }
                    }
                }
            }
        } else {
            cloneData = [...originalData];
        }

        this.setState({ cloneData, searchFilterValue, page: 1 });
    }

    render() {
        const customTotal = (from, to, size) => (
            <span className="react-bootstrap-table-pagination-total">
                Mostrando {from} a {to} de {size} Resultados &nbsp;
            </span>
        );
   
        const headercolor = { color: "#FFFF" };

        const options = {
            paginationSize: 3,
            pageStartIndex: 1,
            sizePerPage: 15,  // which size per page you want to locate as default
            prePage: 'Atrás', // Previous page button text
            nextPage: 'Siguiente', // Next page button text
            firstPage: 'Primero', // First page button text
            lastPage: 'Último', // Last page button text
            noDataText: (<div className="text-center">No se encontraron datos</div>),
            showTotal: true,
            paginationShowsTotal: customTotal,
            page: this.state.page,
            onPageChange: e => { this.setState({ page: e }); },
            disablePageTitle: true,
            sizePerPageList: [{
                text: this.state.sizePerPage, value: this.state.sizePerPage
            }, {
                text: this.state.sizePerPage * 2, value: this.state.sizePerPage * 2
            }, {
                text: 'Todos', value: this.state.cloneData.length
            }]
        };
        //function priceFormatter(cell, row) {
        //    return '<span></span>' + row;
        //}
        return (
            <div>
                <div className="row mb-3">
                    <div className="col-1 offset-9">
                        <label className="p-1">Buscar:</label>
                    </div>
                    <div className="col-2">
                        <input type="text" className="form-control form-control w-100" value={this.state.searchFilterValue} onChange={input => { this.searchFilter(input); }} />
                    </div>
                </div>
                <div className="row">
                    <div className="col-12">
                        <BootstrapTable striped hover condensed
                            key={`data_${new Date().getTime()}`}
                            headerStyle={{ background: '#df6727' }}
                            containerStyle={{ border: '#f0f0f0 1.5px solid' }}
                            data={this.state.cloneData}
                            bootstrap3={true}
                            noDataIndication={() => (<div className="text-center"> {this.state.noDataMessage == null ? 'No se encontraron resultados' : this.state.noDataMessage}</div>)}
                            pagination={true}
                            options={options}
                        >
                            <TableHeaderColumn width='200' dataField="NOMBRE"><div style={headercolor}>División</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="ID_TIPO_CONF" isKey={true}><div style={headercolor}>Tipo Conf.</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV01"><div style={headercolor}>Servicio 1</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV02"><div style={headercolor}>Servicio 2</div></TableHeaderColumn>
                            <TableHeaderColumn width='200' dataField="NOMBRESERV03"><div style={headercolor}>Servicio 3</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV04"><div style={headercolor}>Servicio 4</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV05"><div style={headercolor}>Servicio 5</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV06"><div style={headercolor}>Servicio 6</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV07"><div style={headercolor}>Servicio 7</div></TableHeaderColumn>
                        </BootstrapTable>
                    </div>
                </div>
            </div>
        );
    }
}

export default DataTableProperties;

有什么解決辦法嗎？

Answer 1

獲得它的唯一方法是在string字段中打印object 。

例子：

console.log(`${{}}`);
// [object Object]

console.log('' + {});
// [object Object]

console.log({});
// > {}

---

在<DataTableConfigurator />你打印<a...>{d.nombredivision}</a> ，然后出現“手冊”，所以我猜這就是問題所在。

當你嘗試像<a>{{}}</a>這樣打印“[object Object]”的東西時。

由於 React，這很奇怪，它應該拋出Error: Objects are not valid as a React child 。 普通的 HTML/JS 讓你這樣做，結果正是你已經得到的。

嘗試調試該d.nombredivision以查看它實際上是什么。

Answer 2

我的解決方案：在 DataTableConfigurator 中為每個 header 或元素創建一個 function：

1.- row 是您在原始列表中的行。

cellDivision(cell, row, enumObject, rowIndex) {
        return (
            <a data-toggle="tooltip" title={["Última fecha actualización :" + row.FECHA]}>
                {row.NOMBRE}
            </a>
        )
    }

2.- 在 header 列表中添加數據格式：

<TableHeaderColumn width="130" dataField="NOMBRE" dataFormat={this.cellDivision.bind(this)}><div style={headercolor}>División</div></TableHeaderColumn>

謝謝！