REACT Props 在 useEffect 中未定义

Question

我是 Reactjs 的新手，我有一个问题。

在我的父组件中，我向子组件发送了一个产品 ID：

<Review id={prod.id}/>

我需要产品 ID 才能在子组件中调用 API

export default function Index(props) {
const [pagenum, setPageNum] = useState(0);
const [reviewList, setReviewList] = useState([]);

useEffect(() => {

    get(`/public/product/rate?pagenum=${pagenum}&size=4&id=${props.id}`).then((response) => {
        if (response.status === 200) {
          console.log(response.data);
          setReviewList(response.data);
        }
      });
}, [pagenum]);
return (
    <>
        Hello {props.id}
        {
            reviewList.map((review) => (
                <div>{review.id}</div>
            ))
        }
    </>
);}

但是 prod.id 是 return 未定义的，所以我不能调用 API。我有什么办法可以将 Id 发送到子组件？

Answer 1

您可以将 id 添加到依赖数组。 (code sandbox)

更新了代码沙箱。根据您的需要。请根据您的 url 和参数更新

import React, {
  useState,
  useEffect
} from "react";
import "./styles.css";

function Index(props) {
  const [pagenum, setPageNum] = useState(0);
  const [reviewList, setReviewList] = useState([]);



  useEffect(() => {
    //https://api.github.com/users/shawnquinn
    //`/public/product/rate?pagenum=${pagenum}&size=4&id=${props.id}`
    fetch(
      `https://api.github.com/users/shawnquinn?pagenum=${pagenum}&id=${props.id}`
    ).then((response) => {
      console.log("SUccess");
      if (response.status === 200) {
        console.log(response.data);
        setReviewList(response.data || []);
      }
    });
    console.log("Id, ", props.id);
  }, [props.id, pagenum]);

  return ( <
    >
    Hello {
      props.id
    } {
      reviewList.map((review) => ( <
        div > {
          review.id
        } < /div>
      ))
    } <
    />
  );
}

export default function App() {
  const [id, setId] = useState(0);
  return ( <
    div className = "App" >
    <
    button onClick = {
      () => {
        setId((prev) => prev + 1);
      }
    } >
    Increase Id {
      " "
    } <
    /button> <
    Index id = {
      id
    }
    /> <
    /div>
  );
}

REACT Props 在 useEffect 中未定义

REACT Props is undefined in useEffect

api

function

undefined

reactjs

axios