API返回结果无法在React Bootstrap表格中显示的问题排查

你遇到的问题很典型——React依赖状态的引用变化来触发重渲染，而你直接修改了原状态数组的内容，没有改变数组的引用，所以React认为状态没更新，自然不会重新渲染表格。

具体问题出在这里： #

在你的getResult和getStockPrice方法里，你是这么更新状态的：

// 错误写法：直接修改原数组，引用没变
assets.push(res.data);
setFixedState(assets);

// 股票部分也是一样的错误
stocks.push(res.data);
setStockState(stocks);

push方法是直接修改原数组的内容，数组本身的引用（内存地址）没有变化。React浅比较新旧状态时，发现引用一样，就不会触发重渲染。

怎么修复？ #

你需要创建新的数组来更新状态，让React能检测到引用变化。最简单的方式是用扩展运算符（...）复制原数组，再添加新元素：

1. 修复固定资产的状态更新

把getResult里的axios回调改成：

axios.post("http://localhost:8080/compound-calculator/savings", body, { headers })
 .then(res => {
  // 创建新数组：原数组元素 + 新数据
  setFixedState([...fixedState, res.data]);
  // 这里直接打印新状态就行，不用再map原数组
  console.log([...fixedState, res.data]);
 });

2. 修复股票的状态更新

把getStockPrice里的两个axios回调都改成：

// 第一个axios请求（fcf分支）
axios.post("http://localhost:8080/compound-calculator/stock-fcf", body, { headers })
 .then(res => {
  setStockState([...stockState, res.data]);
  console.log([...stockState, res.data]);
 });

// 第二个axios请求（普通cf分支）
axios.post("http://localhost:8080/compound-calculator/stock", body, { headers })
 .then(res => {
  setStockState([...stockState, res.data]);
  console.log([...stockState, res.data]);
 });

3. 删掉冗余的变量和useEffect

你代码里的stocks、fixed变量，以及对应的useEffect完全是多余的，直接用stockState和fixedState就行，删掉这些代码可以避免混淆：

// 删掉这些冗余代码：
let stocks = stockState;
let fixed = fixedState;

useEffect(() => {
 stocks = stockState;
 fixed = fixedState;
 //Would useRef() fix my issue?
}, [fixedState, stockState]);

为什么这样能解决问题？ #

扩展运算符[...fixedState]会创建一个全新的数组，把原数组的所有元素复制进去，再加上新的res.data。这个新数组的引用和原数组完全不同，React在对比新旧状态时能立刻发现变化，从而触发组件重渲染，表格就能显示新的数据了。

额外提醒：React状态更新的核心原则 #

React的状态必须是不可变的——永远不要直接修改状态对象/数组，必须通过创建新的对象/数组来更新状态。除了扩展运算符，你也可以用Array.concat()或者Array.filter()这类返回新数组的方法，效果是一样的。

内容的提问来源于stack exchange，提问作者J-Daniel-S