React开发故障：子组件无法从Context Provider获取共享数据

核心问题：Item.js的Context Consumer回调未返回JSX节点 #

Item.js中Context Consumer的渲染回调使用了带大括号的箭头函数，但没有添加return语句，导致回调返回undefined，无内容渲染，看起来就像Context获取失败。

修复方法（二选一即可） #

1. 给回调添加return语句：

// 修复后的Item.js
import ItemContext from './Context';

export default function Item (props){
  return (
    <ItemContext.Consumer>
      {(ctx)=>{
        // 新增return返回JSX节点
        return <>
          <div>{ctx.price}</div>
          <div>{ctx.title}</div>
        </>
      }}
    </ItemContext.Consumer>
  )
}

2. 使用箭头函数隐式返回，去掉大括号改用小括号包裹JSX：

{(ctx)=> (
  <>
    <div>{ctx.price}</div>
    <div>{ctx.title}</div>
  </>
)}

其他非阻断性问题优化 #

• App.js中定义的movielist状态未被使用：你在useEffect中请求完数据后，将组装好的Item数组存入了movielist状态，但实际渲染时只输出了<Items />组件，没有用到该状态。如果需要渲染接口返回的列表，建议把请求得到的原始数据通过props/Context传给Items组件，再在Items内部循环渲染Item，不要直接把JSX存入状态，更符合React开发最佳实践。
• App.js中setMovieList后立刻打印movielist拿不到最新值：React的setState是异步批量更新的，刚调用更新方法就打印状态，拿到的是更新前的旧值，如需验证更新后的值，可以在组件顶层打印，或者用useEffect监听movielist的变化。

修复核心问题后即可正常获取Context中传入的title和price值。

内容的提问来源于stack exchange，提问作者Parviz Pirizade