从 Mongodb 发送一个数组到 React with Node

Question

我有一个 mongo 数据库，其中包含带有一些额外数据的电影标题的简短列表。在我的 React 应用程序中，我调用服务器，该服务器又通过 mongoose 从 Mongo 获取数据。数据返回并发送到 App。这一切都很顺利。在应用程序内部，我想在页面上动态解析这些数据。现在我注意到 React 不允许将对象作为子对象，这没关系，因为对于我的动态渲染，无论如何我都想将对象更改为数组（否则 .map() 将不起作用）。但是由于某种原因，我无法将数据作为数组发送过来！

服务器

app.get('/database', (req, res) => {

    Movie.find()
        .then(movies => {
            let movieArr = Object.values(movies); // IF I JUST SEND MOVIEARR I GET AN ERROR

   
            let dataArr = [];

            movieArr.map(movie =>
            dataArr.push(movie.title)); // SO I CREATED A SIMPLIFIED ARRAY WHICH DOES WORK

            res.send(dataArr)
        })
        .catch(err => {
            res.send({error: "Movie.find() error = " + err})
        })
});

我的问题是：原来的movieArr 不是已经是一个数组了吗？我可以在它上面执行.map()，那我为什么要把它推到另一个数组让 React 工作呢？烦人的是我不想推送单独的数据，我希望数组包含所有数据，然后在 React 中调用数据。

完整的图片：

应用

class Database extends Component {
    state = {
        listOfMovies: []
    };

    componentDidMount() {
        this.callServerForDatabase()
            .then(data => this.setState({ listOfMovies: data }))
            .catch(err => console.log(err));
    };

    callServerForDatabase = async () => {
        const response = await fetch('/database');
        const body = await response.json();
        
        const data = Object.values(body);

        if (response.status !== 200) throw Error(body.message);
        return data;
    };

    render() {
        return (
            <Data>
                <p>List Of Movies</p>
                <table>
                    <thead>
                        <tr>
                            <th>Movie Title</th>
                            <th>IMDB</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            {this.state.listOfMovies.map(movie =>
                            <tr>
                            <td>{movie}</td>
                            </tr>)}
                        </tr>
                    </tbody>
                </table>
                )
    }

}

错误

Error: Objects are not valid as a React child (found: object with keys {_id, title, smn, rtc, mtc, imdb, comments, __v}}). If you meant to render a collection of children, use an array instead.

发送到 React 的完整数据应如下所示：

[
 { "title": "Alien",
  "imdb": "90",
   //... etc.
 },
 { "title": "Aliens",
  "imdb": "87",
   //... etc.
},

]

最好可以像this.state.listOfMovies[0].imdb 一样访问。可能也很高兴知道我正在使用打字稿。

我做错了什么？

编辑（已修复！）：

我需要在.map 函数中调用{movies.title}，否则我会将对象渲染为子对象。然后我遇到了一个空数组作为initialState的问题。将电影添加到“开始”后，初始渲染不再有问题，并且执行componentDidMount() 没有任何问题。

Answer 1

当你映射它时，你只返回一个字符串（标题属性）：

movieArr.map(movie =>dataArr.push(movie.title));

所以它在下面的表达式中起作用：

<td>{movie}</td>

对于原来的，React 是说你用“{movie}”来表达以下对象：

找到：带有键 {_id、title、smn、rtc、mtc、imdb、cmets、__v} 的对象

而且它不能将对象用作子对象，所以如果你这样做：

<td>{movie.title}</td>

错误会解决。 （不是地图的问题，而是你的表情）

附注：

const dataArr = movieArr.map(movie => movie.title);

将是使用地图的正确方法；你所拥有的适合 forEach