将状态绑定到React中map函数内部的条件语句

Question

I have a list of posts where clicking one will toggle the post and show its comments. I want the comments to load and show up conditionally based on whether or not the post is toggled, but I can't access state in my method checking if the post is toggled or not.

Isn't the context supposed to be bound automatically with arrow functions?

var PostList = React.createClass({ 
  componentDidMount() {
    this.state = {};
    
    const posts = this.props.posts;
     
    posts.forEach(function(post) {
        
      this.state[post._id] = false;
    });
       
  },

  isToggled(post) {       
        
    return this.state[post];
     
  },

  render: function() {
    var postList = posts.map((post,index) => (
    <div class=“post”>
      {post.content}<br/>
    
      {this.isToggled(post._id) ?
      
      <Comments postId={post._id}/>
    
      :''}
    </div>
  ))
 }

Result:

TypeError: Cannot read property 'idyadayada' of null

Answer 1

USe this.setState outside the forEach




getInitialState(){
  return {
  }
}
       componentDidMount() {
            this.state = {};
                
            const posts = this.props.posts;
          
            var newState = {} ;      
            posts.forEach(function(post) {
                    
              newState[post._id] = false;
            });
             
            this.setState({
              state: newState
            }      
          },