0

嗨，我一直在尝试做以下反应，但我收到了这个错误：

未捕获的错误：对象作为 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}]}
4

4 回答 4

0

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

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);
}

注意：- 这不是完整的代码。这是您提供的代码的唯一改进。对于完整的代码，请发布组件的完整代码或至少是渲染函数。

于 2018-07-27T08:08:55.243 回答
0 
import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      trList : {
        id: [101, 102],
        address: ['aaa', 'bbb'] 
      }
    };
  }

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

  getTrs() {
    const elements = [];
    for (var i=0;i<Object.keys(this.state.trList).length;i++) {
      var htmlElement = <tr key={i}>{this.getTds(Object.keys(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'));
于 2018-07-27T08:10:37.927 回答
0 
    // 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>);
    }
于 2018-07-26T22:08:04.703 回答
0

如果您将有多个 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'));
于 2018-07-26T21:54:02.880 回答