reactjs - 将参数传递给 useEffect()

Question

我想获取当前渲染项目的 id（在我的案例主题中）。我正在尝试通过 useEffect() 钩子来完成它，但它似乎不能接受参数。有没有办法修复它并将收到的数据传递给其他元素？

这是我的完整功能组件：

    const PostOnPage: React.FunctionComponent = () => {
  // Dont let in without token
  useEffect(() => {
    axios
      .get(`http://localhost:4000/`, {
        headers: {
          "auth-token": localStorage.getItem("auth-token"),
        },
      })
      .then((res) => {
        console.log("--------res.data", res.data);
      })
      .catch((err) => {
        console.log("err", err);
        toast.info("You must Log In");
        history.push("/login");
      });
  }, []);

  //Get Post By Id
 useEffect((id : Number) => {
     axios
         .get(`http://localhost:4000/getTopic/${id}`)
         .then((post) => {
           console.log('--------post.data', post.data.description);
         })
         .catch((err)=>{
           console.log('--------err', err);
         })
 })

  const LogOut = () => {
    localStorage.clear();
    history.push("/login");
  };

  const history = useHistory();
  let posts: any = useSelector((state: any) => state.posts);

  return (
    <div id="card" className="card">
      <div id="postButtons" className="buttons">
        <button onClick={() => history.push("/homepage")}>Home</button>
        <button onClick={() => history.push("/profile")}>My Profile</button>
        <button onClick={() => LogOut()}>Log Out</button>
      </div>
      <div className="posts">
        <p>
          Title :
          {posts.map((title: any) => {
            return title.title;
          })}
        </p>

        <p>
          Description :
          {posts.map((item : any) => {return getPostById(item.id)})}
        </p>
      </div>
    </div>
  );
};

export default PostOnPage;

标签： reactjsreact-hooks

Answer 1

useEffect hook 用于根据数据更改/onload 执行功能。它不能接收参数，如果你想在你的 useEffect 中使用你当前渲染的 id 你应该把他作为道具发送。