Question

嗨，我一直在尝试执行以下操作，但出现此错误：

未捕获的错误：对象不是有效的React子对象（找到：带有键{id，address，long，lat，cityId，cityDistrict，phone，name，userId，city}的对象）。如果您打算渲染孩子的集合，请改用数组或使用React附加组件中的createFragment（object）包装对象。检查Comparison的渲染方法。

这是我的代码：

       class Comparison extends Component {

 render() {
let comparedProperties = {
    id: [1001, 1002],
    address: ["abc", "def"]
};

let comparedItemsData = [];

for (var key in comparedProperties) {
    if (comparedProperties.hasOwnProperty(key)) {
        let newTR = <tr key={Math.random()} className="compare-table-row">
            <td className="table-item-header">
                {key}
            </td>
            {comparedProperties[key].map((item) => {
                return <td key={Math.random()} className="table-item">{item}</td>;
            })}
        </tr>;

        comparedItemsData.push(newTR)
    }
}

return (
    <table className="compare-table">
        <tbody>
        {comparedItemsData}
        </tbody>
    </table>
  )
 }
   }

const mapStateToProps = (state) => ({
      ...state
      });
       const mapDispatchToProps = (dispatch) => ({
          actions: bindActionCreators(Actions, dispatch)
      });
      export default connect(
            mapStateToProps,
           mapDispatchToProps
        )(Comparison);

如何在此重复的tr标签内重复我的td标签？并且只有在我的compareProperties对象的这一循环中

更新答案：

所以我想知道问题出在哪里，但我从反应中得到了更好的错误信息，原因是在我的compareProperties中，数组中有一个导致错误的对象

let comparedProperties = {"id":[101,102],"estateAgency":[{"id":1},{"id":2}]}

Answer 1

如果您将有多个TR，而在一个TR中，您将有多个TD，则可以使用以下方式：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      trList: [
        {
          key: 'this is my tr',
          tdList: [
            {
              key: '1',
              name: 'this is my td 1'
            },
            {
              key: '2',
              name: 'this is my td 2'
            }
          ]
        },
        {
          key: 'this is my tr2',
          tdList: [
            {
              key: '3',
              name: 'this is my td 3'
            },
            {
              key: '4',
              name: 'this is my td 5'
            }
          ]
        }
      ]
    };
  }

  getTds(tr) {
    const tdElements = [];
    for (var i=0;i<tr.tdList.length;i++) {
      tdElements.push(
        <td key={tr.tdList[i].key}>{tr.tdList[i].name}</td>
      );
    }
    return tdElements;
  }

  getTrs() {
    const elements = [];
    for (var i=0;i<this.state.trList.length;i++) {
      var htmlElement = <tr key={i}>{this.getTds(this.state.trList[i])}</tr>;
      elements.push(htmlElement);
    }
    return elements;
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
          {this.getTrs()}
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 2

    // Didn't test this; Hope this works for you.

    let comparedItemsData = [];

    for (var key in comparedProperties) {
      if (comparedProperties.hasOwnProperty(key)) {
        let newTDs = [];
        newTDs.push(<td className="table-item-header"> {key} </td>);
        comparedProperties[key].map((item) => {
          newTDs.push(<td key={Math.random()} className="table-item">{item}</td>);
        });
      comparedItemsData.push(<tr key={Math.random()} className="compare-table-row">{newTDs}</tr>);
    }

Answer 3

据我对您尝试编写代码的要求的理解，我想您可以从下面提到的代码中获得一些帮助：-

let comparedProperties = {
  id: [1001,1002],
  address: ["abc","def"]
};

let comparedItemsData = [];
let newTDs = [];
let th = <th key={Math.random()} className="compare-table-row">
  for (var key in comparedProperties) {
        if (comparedProperties.hasOwnProperty(key)) {
        <td className="table-item-header">{key}</td>
    }
  }
</th>

comparedItemsData.push(th);

for (let i =0; i<comparedProperties.id.length;i++){
    let newTr = <tr key={'tr_'+i}>
    <td>{comparedProperties[id][i]}</td>
    <td>{comparedProperties[address][i]}</td>
  </tr>

  comparedItemsData.push(newTr);
}

注意：-这不是完整的代码。这是您提供的部分代码的唯一改进。要获取完整的代码，请发布组件的完整代码，或者至少发布渲染功能。

在react中重复的tr标签中重复td标签

3 个答案: