Question

import React from 'react';
import { observer } from "mobx-react"
import { inject } from "mobx-react"
import { deleteTradeData } from "../Actions/Actions"
import axios from "axios"
@observer
export default class TradeTable extends React.Component {


    componentDidMount() {

        //Adding data of db into mobx store
        axios.get(`http://localhost:8091/trade`)
            .then(res => {
                this.props.store.arr = res.data;
                console.log(res.data ,"resssssdata")
            })

    }

    delete = (id) => {
        console.log(id + "wdccerfec")
        deleteTradeData(id);
         window.location.reload();
    }

    edit = (id) => {
        console.log(id + "iddddddddddddddddddddd")

        this.props.store.editId = id;
        this.props.store.formToggleFlag = false;
        // alert("hi")
        // window.location.reload();
    }
    render() {

        var tableData = this.props.store.arr;


        return <div className="panel panel-default">
              {this.props.store.newTradeRender}
            <div className="panel-body tradeComponent div-background table-responsive">
                <table className="table table-striped tb div-lightbackground">

                    <thead className="thead-dark ">
                        <tr>
                            <th>Date</th>
                            <th>Commodity</th>
                            <th>Side</th>
                            <th>Qty (MT)</th>
                            <th>Price (MT)</th>
                            <th>Counterparty</th>
                            <th>Location</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                        {
                            tableData.map((tableItem, index) => {
                                return (
                                    <tr key={index * Math.random()}>
                                        <td>{tableItem.tradeDate}</td>
                                        <td>{tableItem.commodity}</td>
                                        <td>{tableItem.side}</td>
                                        <td>{tableItem.quantity}</td>
                                        <td>{tableItem.price}</td>
                                        <td>{tableItem.counterparty}</td>
                                        <td>{tableItem.location}</td>

                                        <td>

                                            <button type='submit' className="btn btn-primary table-style" onClick={this.delete.bind(this, tableItem.id)} >
                                                <span className="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                            </button>

                                        </td>
                                        <td>

                                            <button type='submit' className="btn btn-primary table-style edit edit-button" onClick={this.edit.bind(this, tableItem.id)} >
                                                <span className="glyphicon glyphicon-pencil selected-glyph edit-pencil" aria-hidden="true"></span>
                                            </button>
                                        </td>

                                    </tr>)
                            })
                        }

                    </tbody>
                </table>
            </div>
        </div>
    }
}

当触发其他组件中的操作时，上面的代码会被渲染（这是我的逻辑）。

问题是交易表组件的呈现不会导致更新表数据。现在这种行为是预期的，因为组件确实挂载后会在渲染后调用，因为存储数据没有更新所以交易表没有更新。

但我无法解决这个问题。我试过组件将挂载并将更新，但这会导致一些奇怪的行为（更新表运行的循环），这导致我的系统和＆amp;浏览器冻结。所以我不能使用它。是否有任何逻辑或替代？

Answer 1

在React JS中，您无法通过props更改this.props.store.arr = res.data;。这是因为在React JS中存在单向数据流，这意味着数据只能在一个方向上流动，而且从父节点到子节点。因此，更改道具的唯一方法是更改父级传递的值。

此外，ReactJS仅在某些条件下重新渲染。一种是reactJS状态发生变化，另一种是使用shouldComponentUpdate。您必须使用setState更改React状态。如果你改变像this.state.foo = "bar"这样的状态，那么反应将不会重新呈现。

渲染后无法更新表的数据

1 个答案: