Javascript 硬渲染的最佳方式

我正在从本地服务器获取一个帖子列表，然后用一个表单更新它，但是在提交列表后没有更新，必须重新加载它才能更新列表。我尝试添加一个计数器状态，并将其放在UseEffect中的第二个参数上，它起作用了，但有时不起作用。 有没有最好的方法可以让我的列表在服务器上保持最新，而无需重新加载

这是我的密码

function App() {
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    getPosts();
  }, []);

  const getPosts = async () => {
    const response = await axios.get("/posts");
    const { data } = response;
    setPosts(data);
  };

  return (
    <div className="App">
      <Navbar />
      <Route
        exact
        path="/"
        component={() => <Posts posts={posts} getPosts={getPosts} />}
      />
      <Route exact path="/add" render={() => <Form  />} />
    </div>
  );
}

export default App;

函数应用程序（）{
const[posts，setPosts]=React.useState（[]）；
React.useffect（（）=>{
getPosts（）；
}, []);
const getPosts=async（）=>{
const response=wait axios.get（“/posts”）；
const{data}=响应；
设置柱（数据）；
};
返回(
}
/>
} />
);
}
导出默认应用程序；

constposts=（{Posts，getPosts}）=>{
控制台日志（“渲染帖子”）；
//const{posts}=React.useContext（postsContext）；
返回(
{posts.map（（post，idx）=>(
))}
);
};

const Form=（{getPosts}）=>{
const[title，titleChange，resetTitle]=InputHooks（）；
const[description，descriptionChange，resetDescription]=InputHooks（）；
//const{renderToggle}=React.useContext（postsContext）；
异步函数submitForm（）{
const response=wait axios.post（“/posts”，{title，description}）；
const{data}=响应；
console.log（data.message）；
}
返回(
标题
描述
{
e、 预防默认值（）；
submitForm（）；
重置标题（）；
resetDescription（）；
}}
>
提交
);

你能试试这个：

React.useffect（（）=>{getPosts（）；}，[posts]）我们在useEffect中将帖子放在这里，这样每当变量更改时，它都会重新呈现整个组件。
感谢各位的回答，我最终使用异步函数解决了它。我在
submitPost
上使用wait，后跟
getPosts（）
，因此每次提交我都会等待
submit
完成，然后
getPost
。我第一次犯的错误是把
wait
放在
getPosts
上，你应该在每次添加新帖子后都能收到帖子。要做到这一点，您需要使用Redux或Context在两个页面之间进行通信。已经尝试过了，我在提交帖子后执行了getPosts函数。但是，这些帖子仍然停留在那里。必须重新加载。它终于开始工作了，我在submitPost之后执行了getPosts，但这次我在submitPost上使用wait来真正等待函数在getPostsAlready尝试之前完成，这会导致useEffect上的无限循环，因为数组引用一直在更改我的道歉！谢谢你试一试。
const Posts = ({ posts, getPosts }) => {
  console.log("Render POSTS");
  // const { posts } = React.useContext(postsContext);

  return (
    <div style={{ display: "flex" }}>
      {posts.map((post, idx) => (
        <Post
          title={post.title}
          description={post.description}
          key={idx}
          id={post._id}
          getPosts={getPosts}
        />
      ))}
    </div>
  );
};

const Form = ({ getPosts }) => {
  const [title, titleChange, resetTitle] = InputHooks();
  const [description, descriptionChange, resetDescription] = InputHooks();
  // const { renderToggle } = React.useContext(postsContext);

  async function submitForm() {
    const response = await axios.post("/posts", { title, description });
    const { data } = response;
    console.log(data.message);
  }
  return (
    <form>
      <div>
        <label htmlFor="title">Title</label>
        <input
          name="title"
          id="title"
          value={title}
          onChange={titleChange}
        ></input>
      </div>
      <div>
        <label htmlFor="description">Description</label>
        <textarea
          name="description"
          id="description"
          value={description}
          onChange={descriptionChange}
        ></textarea>
      </div>
      <button
        onClick={async (e) => {
          e.preventDefault();
          submitForm();
          resetTitle();
          resetDescription();
        }}
      >
        Submit
      </button>
    </form>
  );