收到此警告“函数作为 React 子级无效”答案

【问题标题】：Getting this warning "Functions are not valid as a React child"收到此警告“函数作为 React 子级无效”
【发布时间】：2019-06-16 03:20:25
【问题描述】：

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

警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用这个函数而不是返回它。

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;

【问题讨论】：

这是我的新代码：

标签： reactjs jsx

【解决方案1】：

你忘记调用你的函数了。

<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'>

【讨论】：

这是我的新代码。我听从了我们的建议，但电影没有显示。控制台也没有错误。我错过了什么？
你的movies 对象是什么样的？
如何将我的新代码粘贴到 cmets 中？抱歉，我是 Stackoverflow 的新手
您可以编辑您的答案。阅读注释中的代码非常困难，除非它只是一个变量名。因为我有一个法语键盘，所以我正在用alt gr + 7 打印回记号
我已经编辑了我的问题中的代码。请检查。

【解决方案2】：

这是使用 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>
    );
  }
}

【讨论】：

【解决方案3】：

请执行如下函数：

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

【讨论】：