Javascript 基于状态在React JS中有条件地呈现内容

我有一个页面，显示已发布的问题。我想创建一个按钮，根据状态={isAnswered:true}只显示已回答的问题

如果状态isAnswered为true，则onClick将仅在对象中将isAnswered设置为true时显示已回答的问题

如何使用此过滤器按钮根据它们的状态有条件地渲染它们

该函数应存储为在渲染函数中调用的常量，还是在此之前

this.state.posts是后端上这些对象的数组：

以下是我的尝试

class Posts extends Component {
    state = {
        posts: []
    }
 
    render () {
        let posts = <p style={{ textAlign: 'center' }}>Something went wrong!</p>;
        

        let {isAnswered} = this.state;

        const renderAuthButton = () => {
          if (isAnswered === true) {
            if ( !this.state.error ) {
            
                posts = this.state.posts.map( (post) => {
                    return (
                        
                        <Post
                            key={post.key}
                            id={post.key}
                            title={post.title}
                            type={post.type}
                            body={post.body}
                            answer={post.answer}
                            onChange={(value, id) => this.postAnswerHandler(value,id)}
                            clicked={(body) => this.displayAnswerHandler(body)}
                           
                             />
                            
                        
                    );
                } );
            }
          } 
        }
      }

        return ( 
            <button onClick={renderAuthButton()}>Filter</button>
                 {posts} 
               )

class Posts扩展组件{
状态={
员额：[]
}
渲染（）{
让posts=
出问题了！
；
设{isAnswered}=this.state；
const renderAuthButton=（）=>{
如果（isAnswered==真）{
如果（！this.state.error）{
posts=this.state.posts.map（（post）=>{
返回(
this.postAnswerHandler（值，id）}
单击={（正文）=>this.displayAnswerHandler（正文）}
/>
);
} );
}
} 
}
}
报税表（
滤器
{posts}
)

您误解了数据结构

this.state

有一个属性

this.state.posts

，它是一个数组。数组中的每个元素都是具有多个属性的对象，包括

isAnswered

执行此操作时：

let {isAnswered} = this.state;

您正在查找不存在的属性

this.state.isAnswered

。没有顶级

isAnswered

属性。它存在于每个

post

对象中，对于每个post都是不同的。因此，您需要查看循环内部的

isAnswered

老实说，这里有很多奇怪的和落后的东西。不要在

render（）

中创建回调！不要从回调返回JSX

这是我清理它的尝试。我正在向this.state添加一个属性，它告诉我们是否要筛选帖子。单击

按钮

更改

此.state.isFiltered

。

render

函数根据当前状态进行适当渲染

class Posts extends Component {
  state = {
    posts: [],
    isFiltered: false,
    isError: false
  };

  async componentDidMount() {
    // do your API fetch and set the state for `posts` and `isError`
    try {
      const fetchedPosts = someApiFunction();
      this.setState({
        posts: fetchedPosts
      });
    } catch (error) {
      this.setState({
        isError: true
      });
    }
  }

  onClickFilter = () => {
    // toggles filter on and off
    this.setState((prevState) => ({
      isFiltered: !prevState.isFiltered
    }));
  };

  render() {
    if (this.state.isError) {
      return <p style={{ textAlign: "center" }}>Something went wrong!</p>;
    }

    // show only answered posts if isFiltered is true, or all posts if false
    const visiblePosts = this.state.isFiltered
      ? this.state.posts.filter((post) => post.isAnswered)
      : this.state.posts;

    return (
      <>
        <button onClick={this.onClickFilter}>Filter</button>
        {visiblePosts.map((post) => {
          return (
            <Post
              key={post.key}
              id={post.key}
              title={post.title}
              type={post.type}
              body={post.body}
              answer={post.answer}
              onChange={(value, id) => this.postAnswerHandler(value, id)}
              clicked={(body) => this.displayAnswerHandler(body)}
            />
          );
        })}
      </>
    );
  }
}

class Posts扩展组件{
状态={
员额：[]，
isFiltered:false，
伊瑟罗：错
};
异步组件didmount（）{
//执行API获取并设置'posts'和'isError'的状态`
试一试{
const fetchedPosts=someapiffunction（）；
这是我的国家({
帖子：fetchedPosts
});
}捕获（错误）{
这是我的国家({
伊瑟罗：是的
});
}
}
onClickFilter=（）=>{
//打开和关闭过滤器
this.setState（（prevState）=>({
isFiltered:！prevState.isFiltered
}));
};
render（）{
if（this.state.isError）{
return
出了问题！
；
}
//如果isFiltered为true，则仅显示已回复的帖子；如果isFiltered为false，则显示所有帖子
const visiblePosts=this.state.isFiltered
？此.state.posts.filter（（post）=>post.isAnswered）
：this.state.posts；
返回(
滤器
{visiblePosts.map（（post）=>{
返回(
this.postAnswerHandler（值，id）}
单击={（正文）=>this.displayAnswerHandler（正文）}
/>
);
})}
);
}
}

您的状态帖子的结构是什么？它的结构是这样的：state={title:''，content:''，type:''，response:''，isAnswered:false，submitted:false}