Question

如果一个数组有长度，我想对其进行迭代并将其数据显示为表格。

遗憾的是，我无法将迭代包装在表格内。该数组是API调用的结果。每个项目都是一个包含对象的数组。看起来像这样：

myArray: [0[{
           name: "Joe",
           surname: "Smith",
           email: "joe@smith.com"
          }], 
          1[{
           name: "Jack",
           surname: "Warren",
           email: "jack@warren.com"
          }]
         ]

代码如下：

class SearchResult extends Component {
    render(){
        const {myArray} = this.props;

        return(
             <section className="SearchResult">
                 <h3>Results</h3>

             {myArray.length === 0 ? (<h3>No Result</h3>):

           myArray.map((oneData, index) =>{
              return (
                  <div key={index} className="result">

                      <h4>{oneData.name}</h4>
                      <p>{oneData.surname}</p>
                      <p>{oneData.email}</p>
                  </div>
             )})
          }
              </section>
          )}}

    export default SearchResult;

当我用表包装myArray.map（oneData，index）等时，React发疯了。您将如何解决？

我的想法是：

class SearchResult extends Component {
    render(){
        const {myArray} = this.props;

        return(
             <section className="SearchResult">
                 <h3>Results</h3>

             {myArray.length === 0 ? (<h3>No Result</h3>):

           (<table>
            <tr>
              <td>name</td>
              <td>surname</td>
              <td>email</td>
            </tr>

           myArray.map((oneData, index) =>{
              return (
                  <div key={index} className="result">
                    <tr>
                        <td><h4>{oneData.name}</h4></td>
                        <td><p>{oneData.surname}</p></td>
                        <td><p>{oneData.email}</p></td>
                    </tr>
                  </div>
             )})
         <table>
          }
              </section>
          )}}

    export default SearchResult;

Answer 1

因为地图中的oneData不是数组这样的对象

[{
  name: "Joe",
  surname: "Smith",
  email: "joe@smith.com"
}]

因此oneData.name的值未定义，应该为oneData[0].name。因此，您可以使用array destructuring进行修复。

将myArray.map((oneData, index)...替换为myArray.map(([oneData], index)...

React条件渲染中的表迭代

1 个答案: