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;

Answer 1

useEffect挂钩用于根据数据更改/加载来执行功能。它无法接收参数，如果要在useEffect中使用当前渲染的ID，则应将其作为道具发送。

Answer 2

useEffect钩子不带参数。您必须在组件中传递参数。

const Component = ({ id }) => {

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

    return (
         // your render
          )
}

Answer 3

如果您将ID存储在状态中，则如果ID更改，则可以触发useEffect。在下面的示例中，我将id存储在状态中，并将其存储在第二个useEffect函数中。您还需要添加useEffect的更改参数

 const PostOnPage: React.FunctionComponent = () => {
  const [id,setId]=useState()
  // Dont let in without token
  useEffect(() => {
    axios
      .get(`http://localhost:4000/`, {
        headers: {
          "auth-token": localStorage.getItem("auth-token"),
        },
      })
      .then((res) => {
        setId(res.data.id)
        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(() => {
     axios
         .get(`http://localhost:4000/getTopic/${id}`)
         .then((post) => {
           console.log('--------post.data', post.data.description);
         })
         .catch((err)=>{
           console.log('--------err', err);
         })
 },[id])

  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;

将参数传递给useEffect（）

3 个答案: