从父组件将道具传递给 UseEffect 钩子

Question

我正在尝试将道具从我的父组件传递给子组件。以下是重要的 sn-ps：

片段 1：这是包含道具（整数）的对象。

 const cardProps = {
        cardProps0: 0,

片段 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

您需要将MyCardLink 组件的参数添加为：

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;