Question

我正在尝试以html表格式呈现来自数组对象的电影列表。我收到此警告：

警告：函数作为React子元素无效。如果返回Component而不是从render返回，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。

import React from 'react';
import {movies} from '../services/fakeMovieService';

class Movies extends React.Component {
constructor(props) {
    super(props);

    this.tableFormat = this.tableFormat.bind(this);
}

    tableFormat() {
        movies.map((movie) => {
            return (
                <tr>
                    <td key={movie._id}>{movie.title}</td>
                </tr>
            );
        });
    }


    render() {

        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rate</th>
                    </tr>
                </thead>
                <tbody>
                    {this.tableFormat()}
                </tbody>
            </table>

        );
    }
}

export default Movies;

Answer 1

请执行以下功能：

<tbody>
   {this.tableformatter()}
</tbody>

Answer 2

您忘记了调用函数。

<tbody>
   {this.tableformatter()}
</tbody>

但是即使这样做，我也不认为结果会达到您的期望。

要在React中渲染元素数组，您应该使用map function as said in the docs。

以下结果将是：

<tbody>
    {movies.map(movie => 
        <tr key={movie.title}>
            <td>{movie.title}</td>
        </tr>
    )}
</tbody>

编辑：

我打了一个错字，放了movies而不是movie。

以下代码应使用map和内联条件来完成您要查找的所有操作：

const movies = [
    {
        title: "Spooky",
        genre: 'eziojgf',
        stock: 'nope',
        rate: 87
    },
    {
        title: "Sharknado",
        genre: 'shitty',
        stock: 'yes',
    },
    {
        title: "haha yes"
    },
    {
        title: "uhmmmm",
        rate: -5
    }
]

class Movies extends React.Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rate</th>
                    </tr>
                </thead>
                <tbody>
                    {movies.map(movie =>
                        <tr key={movie.title}>
                            {['title', 'genre', 'stock', 'rate'].map(category => <td key={category}>{movie[category]}</td>)}
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }
}

ReactDOM.render(<Movies />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'>

Answer 3

这是使用React解决此问题的正确方法

function TableFormatter ({title /* , and other props genre, rate etc. *//}) {
  return (
    <tr>
      <td>{title}</td>
      {/* you may want to add other td here *//}
    </tr>
  )
}

function Table({movies}) {
  render() {
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Genre</th>
            <th>Stock</th>
            <th>Rate</th>
          </tr>
        </thead>
        <tbody>
          {movies.map(movie => <TableFormatter key={movie.id} {...movie} />)}
        </tbody>
      </table>
    );
  }
}

得到此警告“功能作为React子代无效”

3 个答案: