Question

我正在通过React和Meteor的在线课程。每当我点击提交按钮时，它会在数据库中注册新播放器，但它实际上并未在客户端显示p。我在控制台中获得以下内容：

Tracker重新计算功能的异常：不变违规：对象作为React子节点无效（找到：具有键{playerName}的对象）。如果您要渲染子集合，请使用数组，或使用React附加组件中的createFragment（object）包装对象。＆＃34;

 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？）这就是你收到此错误的原因。尝试在players完成后记录.fetch对象，看看这个对象里面有什么。

JSX不渲染

1 个答案: