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

Question

讨论应用出现问题。我只能在给定时间渲染标题或帖子。无法在 thread.jsx 中渲染。 这个应用程序在 react 和 firebase 中。 请建议我如何解决这个问题。 我认为 post 中的 map 函数不对。如何使用 map 函数编写对象。我需要把对象写成道具吗？

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

正是地图功能是错误的。您传递的 3 个参数与地图数组助手使用的参数不匹配。

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

滚动到参数部分来检查它们。现在你传递的是帖子的参数而不是数组。

也许你应该尝试这样的事情：

{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}