React如何从父组件向子组件传递props，子组件无法识别传参问题

• 遍历方法选型错误：Array.forEach() 执行后无返回值，当前代码里赋值给listNews的变量最终为undefined，根本没有生成可被React识别的渲染节点集合，子组件完全没有被实际挂载，自然出现props无法识别的现象。
• 回调逻辑缺失返回：即使遍历方法有返回能力，当前forEach回调的代码块内没有显式return语句，也只会收集到一堆空值，无法生成有效组件实例。

采用Array.map()完成数组遍历，该方法会将每个回调返回的元素收集为新数组，可直接嵌入JSX完成渲染；同时补充节点返回逻辑，加上列表渲染必需的唯一key属性即可。

替换后的News.js遍历逻辑代码：

const listNews = AllNews.map((news, index) => {
  // 显式返回子组件，补充唯一key
  return <Singlenews
    key={`news-${index}`}
    title={news.title}
    description={news.description}
  />
})

补充说明：

• 子组件Singlenews中从props解构title、description的逻辑本身无错误，只要父组件正确渲染出子组件节点，两个属性可以正常被子组件读取使用
• 遍历生成的列表节点必须绑定唯一key属性，否则React会抛出列表渲染相关警告

内容的提问来源于stack exchange，提问作者Brandon Austin