將道具從父組件傳遞給 UseEffect 鈎子

Question

我試圖將道具從我的父組件傳遞給子組件。 以下是重要的片段：

代碼段 1：這是包含 prop（整數）的對象。

 const cardProps = {
        cardProps0: 0,

Snippet 2：這是父組件中的 Card 組件，將 prop 傳遞給子組件

return (
<MyCardLink source={cardProps.cardProps0} />

代碼段 3：這是子組件 (MyCardLink)

useEffect((props) => {
        axios
            .get(
                'http://newsapi.org/v2/everything?q=economy&apiKey=XXXXXXXXXXXXXXXX'
            )
            .then((res) => {
                console.log(res);
                setNews(res.data.articles[props.source]);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

目標是 [prop.source] 包含來自 API 提供的數組列表的數字值。 如果我只是在子組件 (MyCardLink) 中放置一個數值來代替 setNews 函數上的 [props.source]，那么它呈現組件沒有問題。

我的問題是當我將 prop 從父組件傳遞給子組件並使用 [prop.source] 時，沒有任何渲染，我從控制台日志中得到的只是：

無法讀取未定義的屬性“源”。

難道我做錯了什么？

Answer 1

您需要將props添加到MyCardLink組件的參數中，而不是將props傳遞到您的useEffect中：

const MyCardLink = (props) => {
    // your component's defintion
}

此外，您可以按以下方式解構：

const MyCardLink = (props) => {
   const { source } = props

   // ... rest
}

然后，您可以在沒有props情況下在useEffect使用：

useEffect(() => {
   axios.get(
          'http://newsapi.org/v2/everything?q=economy&apiKey=XXXXXXXXXXXXXXXX'
       )
       .then((res) => {
            console.log(res);
            setNews(res.data.articles[source]);
       })
       .catch((err) => {
            console.log(err);
       }
   );
}, []);

---

根據您在評論部分的其他問題，我會做的是：

1. 將狀態的初始值從""更改為null作為const [news, setNews] = useState(null) 。
2. 另外，我會使用&&進行null檢查，並且僅當<Card />組件在您的return具有作為news && <Card className={classes.root}>價值時才呈現它。

這背后的原因是您的API響應是異步到達的。

Answer 2

在下面的組件中使用 use props：

const MyCardLink =(props)=>{
 ...
 ...
 ...
}
export default MyCardLink;