流行と反作用はデータを正しく出力しません。

Question

私はペイントに関するいくつかのデータを出力しようとしていますが、私が得るのは[オブジェクト、オブジェクト]です。私は.toString（）を追加しようとしましたが、運はありません。どんな助けでも大歓迎です。

これは、配列内にオブジェクトがあることを意味していますが、配列を生成しているかどうか、および/または再フォーマットする方法がわかりません。あなたは、変数{paintArr}の代わりに、マップ機能の現在の要素を使用しているため

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

あなたは配列全体を印刷しています。部屋は、アレイ内の現在の要素の属性であるため、またkey={room}今key={entry.room}ある

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> 
    ); 

注：これは、この（と仮定すると、あなたが色を印刷する）ようにする必要があります。

ここで何が起こっているのかまだ分かっていない場合は、Array.mapの機能とその動作についてさらに調べることができます。