JSX 不渲染

Question

我正在学习关于 React 和 Meteor 的在线课程。每当我点击提交按钮时，它都会在数据库中注册新玩家，但它实际上并没有在客户端显示 p 。我在控制台中得到以下信息：

Tracker 重新计算功能的异常： Invariant Violation：对象作为 React 子对象无效（发现：对象与键 {playerName}）。如果您打算渲染一组子项，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。”

 import React from 'react';
 import ReactDOM from 'react-dom';
 import {Meteor} from 'meteor/meteor';
 import {Tracker} from 'meteor/tracker';

 import {Players} from './../imports/api/players.js';

 const renderPlayers = (playersList) => {

    return playersList.map( (player) =>{
        return <p key={player._id}>{player.name} has {player.score} points!</p>;
    });
 };

const handleSubmit = (e) => {
    let playerName = e.target.playerName.value;

    e.preventDefault();

    if (playerName) {

    e.target.playerName.value = '';

    Players.insert({
    name: playerName,
    score: 0
    });
   }
 };
 Meteor.startup( () => {

    Tracker.autorun( () => {
        let players = Players.find().fetch();
        let title = 'Score Keeper';
        let name = 'Bill';
        let jsx = (
            <div>
                <h1>{title}</h1>
                <p>Hello {name}!</p>
                <p>Second p</p>
                {renderPlayers(players)}
                <form onSubmit={handleSubmit}>
                    <input type="text" name="playerName" placeholder="Player Name"/>
                    <button>Add Player</button>
                </form>
            </div>
            );
        ReactDOM.render(jsx, document.getElementById('app'));
    });
});

Answer 1

我几乎可以肯定这一行：
let players = Players.find().fetch(); 没有像您预期的那样返回数组。
我猜.fetch 正在返回一个对象（其中可能包含.data？），这就是您收到此错误的原因。
在.fetch 完成后尝试记录players 对象，看看这个对象里面有什么。