React组件渲染后无法更新TradeTable表格数据求助

看起来你遇到了Mobx状态更新后组件没同步渲染的问题，我帮你梳理下关键问题点和解决方案：

首先，咱们得先确认你的Mobx Store配置是否正确——这是组件能响应数据变化的核心：

1. 确保Store中的数组是可观察的 #

如果你的Store里的arr只是普通数组，Mobx根本追踪不到它的变化，自然不会触发组件更新。你需要用Mobx的@observable来声明这个数组，同时用@action来封装修改它的方法：

// 示例Store代码（比如TradeStore.js）
import { observable, action } from 'mobx';

export class TradeStore {
  // 用@observable标记可追踪的状态
  @observable arr = [];

  // 用@action封装状态更新逻辑
  @action setTradeData(data) {
    this.arr = data;
  }

  @action removeTrade(id) {
    // 通过过滤生成新数组，Mobx会感知到数组替换
    this.arr = this.arr.filter(trade => trade.id !== id);
  }
}

2. 组件中正确注入并更新Store状态 #

你的组件代码里有@inject但没写参数，得明确注入你的Store；另外直接给this.props.store.arr赋值虽然可能生效，但更规范（也更安全）的方式是调用Store里的action方法：

import React from 'react';
import { observer, inject } from "mobx-react"
import axios from "axios"

// 先注入Store，再用@observer包裹组件
@inject('store')
@observer
export default class TradeTable extends React.Component {
  componentDidMount() {
    axios.get(`http://localhost:8091/trade`)
      .then(res => {
        // 调用Store的action更新数据
        this.props.store.setTradeData(res.data);
        console.log(res.data, "resssssdata")
      })
      .catch(err => {
        console.error('获取交易数据失败:', err);
      });
  }

  delete = (id) => {
    console.log(id + "wdccerfec");
    // 先调用后端接口删除数据，成功后更新Store
    axios.delete(`http://localhost:8091/trade/${id}`)
      .then(() => {
        // 调用Store的action删除对应项
        this.props.store.removeTrade(id);
      })
      .catch(err => {
        console.error('删除交易数据失败:', err);
      });
  }

  // 别忘了补充渲染逻辑，直接使用Store中的可观察数组
  render() {
    const { arr } = this.props.store;
    return (
      <table border="1">
        <thead>
          <tr>
            <th>ID</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {arr.map(trade => (
            <tr key={trade.id}>
              <td>{trade.id}</td>
              <td><button onClick={() => this.delete(trade.id)}>删除</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

关键注意点总结 #

• 可观察状态是基础：只有用@observable标记的状态，Mobx才能追踪变化。
• Action封装修改：所有对可观察状态的修改都要放在@action方法里，这是Mobx的最佳实践，能避免很多奇怪的更新问题。
• 组件要同时用@inject和@observer：@inject把Store传到组件props，@observer让组件监听Store状态变化并自动重新渲染。

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