Meteor和React不能正確輸出數據。

Question

所以我想輸出一些關於paint的數據，我得到的是[object，object]。我嘗試添加.toString（）但沒有運氣。任何幫助將不勝感激。

我知道這意味着我的數組內有對象，但我甚至不知道生成數組和/或如何重新格式化它。

class PaintPage extends Component { 
constructor(props) { 
    super(props); 
    this.state = {}; 

    this.handleSubmit = this.handleSubmit.bind(this); 
    //Brads cool 
} 

handleSubmit(e) { 
    e.preventDefault(); 

    Paint.insert({ 
     brand: this.refs.brand.value, 
     color: this.refs.color.value, 
     sheen: this.refs.sheen.value, 
     room: this.refs.room.value 
    }); 
} 

render() { 
    var paintArr = Paint.find().fetch(); 
    paintArr.map((room, index) => 
     <div className="row"> 
      <div className="col-xs-2"> 
       <li className="list-group-item text-center" key={room}> 
        {paintArr} 
       </li> 
      </div> 
     </div> 
    ); 

    return (
     <div> 
      <div className="row"> 
       <div className="col-xs-4"> 
        <ProductNav /> 
       </div> 
      </div> 
      <form className="form" onSubmit={this.handleSubmit}> 
       <div className="row"> 
        <div className="col-xs-4" /> 
        <div className="col-xs-4"> 
         <label htmlFor="brand" className="input"> 
          Paint Brand 
         </label> 
         <div className="field"> 
          <input 
           type="text" 
           name="brand" 
           className="form-control" 
           placeholder="Brand/Company" 
           ref="brand" 
           value={this.props.value} 
           onChange={this.props.onChange} 
          /> 
         </div> 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col-xs-4" /> 
        <div className="col-xs-4"> 
         <label htmlFor="color" className="input"> 
          Color 
         </label> 
         <div className="field"> 
          <input 
           type="text" 
           name="brand" 
           className="form-control" 
           placeholder="Color" 
           ref="color" 
           value={this.props.value} 
           onChange={this.props.onChange} 
          /> 
         </div> 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col-xs-4" /> 
        <div className="col-xs-4"> 
         <label htmlFor="brand" className="input"> 
          Sheen 
         </label> 
         <div className="field"> 
          <input 
           type="text" 
           name="brand" 
           className="form-control" 
           placeholder="Sheen" 
           ref="sheen" 
           value={this.props.value} 
           onChange={this.props.onChange} 
          /> 
         </div> 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col-xs-4" /> 
        <div className="col-xs-4"> 
         <label htmlFor="room" className="input"> 
          Room 
         </label> 
         <div className="field"> 
          <input 
           type="text" 
           name="room" 
           className="form-control" 
           placeholder="Room" 
           ref="room" 
           value={this.props.value} 
           onChange={this.props.onChange} 
          /> 
         </div> 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col-xs-12"> </div> 
        <input 
         className="btn btn-primary btn-lg button-buffer" 
         type="submit" 
         value="Input" 
        /> 
       </div> 
      </form> 
      <div> 
       <div> 
        <ul className="list-group"> 
         {paintArr.toString()} 
        </ul> 
       </div> 
      </div> 
     </div> 
    ); 
} 
} 

export default PaintPage; 

Answer 1

您正在打印整個數組，因爲您使用變量{paintArr}而不是地圖函數的當前元素。它應該是這樣的（假設你要打印彩色）：

var painter = Paint.find().fetch(); 
    paintArr.map((entry, index) => 
     <div className="row"> 
      <div className="col-xs-2"> 
       <li className="list-group-item text-center" key={entry.room}> 
        {entry.color} 
       </li> 
      </div> 
     </div> 
    ); 

注意，也key={room}現在key={entry.room}因爲房間是數組中的當前元素的屬性。

如果你仍然不知道這裏發生了什麼，你可以進一步研究Array.map函數及其工作原理。