Question

我是React的新手，正在尝试学习如何将我拥有的类组件更改为功能组件。这个概念很有意义，但是我对如何在多个状态下执行操作感到困惑。

class PostListWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayCategory: "View All",
      posts: props.posts,
      postCategories: props.postCategories
    };
    this.setCategory = this.setCategory.bind(this);
  }
  setCategory(post_category) {
    this.setState({
      displayCategory: post_category
    });
  }

  render() {
    return <FilterSection setCategory={this.setCategory} state={this.state} posts={this.state.posts} />;
  }
}

到目前为止，我有

const PostListWrapper = () => {

  const [displayCategory, setDisplayCategory] = React.useState("View All");
  const [posts, setPosts] = React.useState(posts);
  const [postCategories, setPostCategories] = React.useState(postCategories);

  const setCategory = () => setDisplayCategory(postCategories);

    return (
      <FilterSection setCategory={this.setCategory} state={this.state} posts={this.state.posts} />
    );
}

我只是不确定如何处理const setCategory = () => setDisplayCategory(postCategories);

Answer 1

在您的类版本中，post_category是子组件传递给setCategory的参数。在功能组件中，您已经具有一个更新程序功能，用于更新类别状态，状态分派功能setPostCategories，因此请将该功能传递给以下人员：

<FilterSection setCategory={setPostCategories}

您也无需声明setCategory变量-您可以将其完全删除。

将类组件更改为功能组件

1 个答案: