Question

我正在尝试将道具从我的父组件传递到子组件。以下是重要的摘要：

代码段1：这是包含prop（整数）的对象。

 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服务的数组列表中的数字值。如果我只是在setNews函数的子组件（MyCardLink）中代替[props.source]放置一个数字值，那么它将使该组件没有问题。

我的问题是，当我将prop从父组件传递到子组件并使用[prop.source]时，没有任何渲染，而我从控制台日志中得到的只是：

无法读取未定义的属性“源”。

我做错什么了吗？

Answer 1

您无需将props传递到useEffect中，而是需要将MyCardLink组件的参数添加为：

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

此外，您还可以按以下步骤进行销毁：

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

   // ... rest
}

然后，您只需在useEffect中使用props，就可以使用：

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);
       }
   );
}, []);

根据您在评论部分提出的其他问题，我将要做的是：

将状态的初始值从""更改为null到const [news, setNews] = useState(null)。
我也将使用&&进行null检查并渲染<Card />组件，只要它在您的news && <Card className={classes.root}>中具有return的值。

其背后的原因是您的 API 响应异步到达。

Answer 2

在以下组件中使用使用道具：

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

通过父组件将道具传递给UseEffect挂钩

2 个答案: