将道具从父组件传递给 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;