React Context Provider无法感知数据更新问题求助

你的问题核心出在两处关键错误，下面是具体分析和修复方案：

1. Archive组件的props接收与状态初始化错误 #

• 你当前将Archive的参数写成(dataBuy)，但React组件的props是一个对象，这里的dataBuy实际是整个props对象，正确写法应该是解构出目标属性：const Archive = ({ dataBuy }) => { ... }
• 另外，你用useState把rows初始化为dataBuy，但useState的初始值仅在组件首次挂载时生效，后续dataBuy更新时，rows不会自动同步——因为useState不会监听props的变化。

2. 可选优化：Modalbuy中的setDataBuy避免闭包问题 #

虽然父组件能打印更新，但直接用当前dataBuy快照更新状态，在某些场景下可能出现闭包导致的旧状态问题，建议改用函数式更新确保拿到最新状态：

// Modalbuy.js中的addBuy函数修改为
function addBuy() {
  setDataBuy(prevData => [...prevData, {
    side: "BUY",
    price: price, // 原写法price:{price}会生成嵌套对象，直接传原始值即可
    volume: inputVolume, // 同理，无需包裹成对象
    timestamp: new Date().toLocaleTimeString()
  }])
}

正确的Archive组件写法 #

方案一：直接传递props（推荐） #

不需要额外维护本地状态，直接将props的dataBuy传给Table组件：

import React from 'react';
import './archive.css';
import Table from './Table';

const Archive = ({ dataBuy }) => {
  console.log(dataBuy)

  return (
    <Table dataBuy={dataBuy} />
  )
}

export default Archive;

方案二：若需本地状态处理数据 #

如果需要对数据做本地处理，可通过useEffect监听dataBuy变化来同步状态：

import React, { useState, useEffect } from 'react';
import './archive.css';
import Table from './Table';

const Archive = ({ dataBuy }) => {
  const [rows, setRows] = useState(dataBuy)

  // 监听dataBuy变化，同步更新rows
  useEffect(() => {
    setRows(dataBuy)
  }, [dataBuy])

  console.log(rows)

  return (
    <Table dataBuy={rows} />
  )
}

export default Archive;

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