React中组件先渲染后更新state、点击拉取数据展示默认值问题求解

React的状态更新、异步IO请求均为非阻塞的异步逻辑，永远会先执行当前同步栈内的渲染逻辑，再处理异步回调中的状态更新，你遇到的执行顺序是React的默认正常行为：

1. 点击按钮触发setBtn_data，React会先触发一次组件重渲染
2. 渲染完成后才会执行监听btn_data变化的useEffect回调，发起接口请求
3. 接口请求是异步操作，等待返回后才会执行setData_grabber，触发第二次重渲染，将新数据传递给子组件

你当前显示异常是代码存在两个显性bug导致的，修复方案如下： #

• 1. 修正NewsItem组件的props属性名不匹配问题
     你在App组件中给NewsItem传递的属性名为news_data，但NewsItem中取的是this.props.data，属性名对不上导致永远拿不到正确数据，直接修改NewsItem的取值逻辑即可：

// NewsItem.js 原代码
const {title, description, url, urlToImage} = this.props.data
// 修改为
const {title, description, url, urlToImage} = this.props.news_data

• 2. 修正App组件的列表渲染判断逻辑
     JS中空数组[]为真值，你写的data_grabber?判断永远成立，首次渲染就会遍历空数组，不会等待数据返回，修改判断条件即可：

// App.js 原代码
{data_grabber? data_grabber.map((news_data)=>{
// 修改为，同时给子组件加key属性避免React警告
{data_grabber.length > 0 ? data_grabber.map((news_data, index)=>{
  return(<NewsItem key={index} news_data={news_data}/>)
}):<div>No data available</div>}

• 3. 可选优化：添加加载状态提升用户体验
     可以新增loading状态，在请求过程中展示加载提示，避免用户感知卡顿：

// App.js 新增状态
const [loading, setLoading] = useState(false);

// 给Navbar传递setLoading方法
<Navbar
  ...其余属性不变
  setLoading={setLoading}
/>

// Navbar.js中修改请求逻辑，新增loading控制和异常捕获
useEffect(() => {
  const fetcher = async () => {
    // 空关键词不发起请求，避免首次渲染触发无效请求
    if(!props.btn_data.trim()) return
    props.setLoading(true)
    try {
      const link = `https://newsapi.org/v2/everything?q=${props.btn_data}&apiKey=API_KEY`;
      const raw_data = await fetch(link);
      const data = await raw_data.json();
      props.setData_grabber(data.articles || [])
    } catch (err) {
      console.error('新闻请求失败', err)
      props.setData_grabber([])
    } finally {
      props.setLoading(false)
    }
  };
  fetcher();
}, [props.btn_data]);

// App.js 调整渲染逻辑
{
  loading ? <div>新闻加载中...</div> :
  data_grabber.length > 0 ? 
    data_grabber.map((news_data, index)=> <NewsItem key={index} news_data={news_data}/>) :
    <div>暂无相关新闻数据</div>
}

• 4. 可选优化：移除冗余的btn_data状态
     你可以直接在按钮点击事件中发起请求，无需通过btn_data+useEffect的方式中转，减少一次不必要的重渲染，逻辑更直观。

内容的提问来源于stack exchange，提问作者Dhiran Sapkota