javascript - React：在服务函数中处理状态更新是一种好习惯吗？

Question

以在页面上显示帖子的虚拟博客应用程序为例。

在某些时候，您可以更新帖子正文。我将生成的代码如下所示：

// services
import { updatePost } from './postServices.js';

const Blog = () => {
  const [posts, setPosts] = useState([]);

  ...

  const handleUpdatePost = (newBody) => {
    updatePost(postId, newBody posts, setPosts)
      .catch((error) => // handle error )
  };

  ...

  return (
    ...
  )

};

函数updatePost看起来像这样：

export const updatePost = async (postId, newBody, posts, setPosts) => {
  const result = await axios.post(`posts/${postId}`, { body: newBody });
  
  // handling the state update here
  const { updatedPost } = result.data;
  const copyPosts = [...posts];
  const post = copyPosts.find((post) => post.id === updatedPost.id);
  post.body = updatedPost.body;
  setPosts(copyPosts);
};

我喜欢这种方法，因为它使反应组件保持干净且易于理解。另一方面，它需要传递整个posts数组及其setState，我听说这可能不太好（出于性能原因？）。

我的问题是：该代码会被认为是好的还是有我不理解的陷阱？

标签： javascriptreactjs