Question

使用打击乐器应用程序遇到麻烦。我只能在给定的时间渲染标题或帖子，但在thread.jsx中却很难渲染。该应用程序处于反应和火力中。请建议我如何解决此问题。我认为发布中的地图功能不正确。如何使用地图功能编写对象。我需要写物体作为道具吗？

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}

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

1 个答案: