react render --如何在讨论应用程序中使用地图功能渲染2个道具

Question

使用dicussion应用程序时遇到问题。我只能在给定的time.Having中渲染标题或post，但在thread.jsx中如何渲染存在问题。此应用程序在react和firebase中。请建议我如何解决这个问题。我认为post中的map函数不是用map函数编写对象的right.how。我需要把object写成道具吗？

Thread.jsx

postEditor.jsx-----
import React, {Component} from 'react';
import './DpostEditor.css';

export default class PostEditor extends Component {
    constructor(props) {
    super(props);


    this.state= {

    newPostBody:'',
  newHeaderBody:'',
    };
 this. handlePostHeaderInputChange=this.handlePostHeaderInputChange.bind(this);
    this.handlePostEditorInputChange = this.handlePostEditorInputChange.bind(this);
    this.createPost = this.createPost.bind(this);
}


  handlePostEditorInputChange(e) {
    this.setState({

      newPostBody : e.target.value,

    })
  }
  handlePostHeaderInputChange(e) {
    this.setState({

      newHeaderBody : e.target.value,

    })
  }

  createPost() {
  this.props.addPost(this.state.newPostBody);


  this.setState({

  newPostBody: '',
  newHeaderBody:'',
  });

  }

    render() {
    return(
     <div className= "panel panel-default post-editor">
          <div className="panel-body">
            <textarea className= "form-control post-header-input" value={this.state.newHeaderBody} onChange={this. handlePostHeaderInputChange }/>
            <textarea className= "form-control post-editor-input" value={this.state.newPostBody} onChange={this.handlePostEditorInputChange }/>
            <button className= "btn btn-success post-editor-button" onClick= {this.createPost}> Post </button>

          </div>
        </div>
        )
    }
}

Post.jsx

import React from 'react';
import './Dpost.css';



 const Post= (props)=> (

    <div className=" panel panel-default post-body">
       <div className="panel-heading">
            {props.postBody.map((header,postType,idx)=>(
                <div>
                <div> {header} </div>
                 <div> {postType} </div>
                </div>
            ))
            }
       </div>


    </div>      

);

export default Post;

Answer 1

确切地说，map函数是错误的。您传递的3个参数与映射数组辅助对象使用的参数不匹配。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

滚动到Parameters部分以检查它们。现在，您传递的是post的参数，而不是数组。

也许你应该试试这样的东西：

{props.postBody.map((post)=>(
  <div key={post.idx}>// remember the key in a map iterator
    <div> {post.header} </div>
    <div> {post.postType} </div>
  </div>
))}

但这取决于您的props.postBody数组的结构。上面的代码假设这是一个帖子的集合。

编辑

考虑到您的属性在某些时候可能是未定义的，您可以使用条件逻辑来运行数组映射助手：

{props.postBody ? props.postBody.map((post)=>(
  <div key={post.idx}>// remember the key in a map iterator
    <div> {post.header} </div>
    <div> {post.postType} </div>
  </div>
)) : null}