formatExtraData value from state not refreshing

[lovato]

I might have implemented it not on the most perfect way, but it worked for RBTv1.
Why? Because the formatExtraData value was explicitly declared inside render.
With RBTv2, it is just a field on a JSON, and changing the state isn't seen by render().

I make a bunch of ajax calls (up to 3). One is for master tabledata, and others to get descriptions about IDs used on the database table, so I can display names instead of ids.

Since everything is async, it happens to update this side data bucket AFTER rendering, and I keep seeing nothing at table cells (since side-json is empty at this moment).

The trick is (and where I am asking for quick help) that if I do paginate, next page has all my data, and if I go back to page 1, it is sitting there perfectly. But I don't know how to trigger that re-render w/o changing pages.

Long help would be if this is a real problem, and needs to be discussed. My point on this is because using table v1 it was working because it happened to be declared in render on TableHeaderColumn as prop.

[lovato]

I did a few experiments now, w/o success.
One thing I saw is changing the page rows limit from 25 to 50. The "newer" records showed up correctly, but the current older view remained with the "n/a" in the fields, meaning it was not rendered again.

[lovato]

Same data, if I keep 25 per page, and do "go to page 2" and "go to page 1" back.

From now on, everything gets fine, till I reload the page.

[lovato]

Some snips of code:

component.constructor:
    this.state = {
      contas: []
    };

component.async componentDidMount:
    await api.get_contas().then(response => {
      if (response.status === 200) {
        this.setState({
          contas: response.data.message
        });
      }
    });

component.render.columns:
      {
        dataField: "conta_uuid",
        text: "Banco / Ag / Conta",
        sort: true,
        align: "left",
        formatter: contaFormatter,
        formatExtraData: this.state.contas
      },

function contaFormatter(cell, row, rowIndex, values=[]) {
  // bad code, I know, it has terrible performance, but I needed a lookup
  if (values) {
    var i;
    for (i = 0; i < values.length; i++) {
      if (cell == values[i].uuid) {
        return (
          values[i].banco_codigo +
          " / " +
          values[i].banco_agencia +
          " / " +
          values[i].banco_conta +
          "-" +
          values[i].banco_conta_digito
        );
      }
    }
    return "N/A";
  } else {
    return null;
  }
}

[lovato]

Well, "solved" my problem this way:

component.render:
    if ( this.state.contas.length > 1) {
      const columns = [...
      ... and so on up to render the table
    } else {
      return (<div> HOLD ON </div>);
    }

[lovato]

I will evolve it to a better "no data yet" handler, but if there is another way to implement something better than the way I did, I will appreciate. Else, this ticket can be closed.

[AllenFang]

@lovato https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnformatter-function

I will not suggest developer to give a state data to formatExtraData, but if you did, you must update formatExtraData in a correct way: https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

If ok, would you please give me a simple and minimal code on codesandbox so that I can help you to see what's kind of issue you face? No rush, thank you

btw, https://codesandbox.io/s/jlol04qrxv this is an example you can take and remember to change react-bootstrap-table-next version to the newest. Many thank

[jrae26]

@AllenFang I am also experiencing this issue. Would you mind explaining what is incorrect about the example below?

https://codesandbox.io/s/zkn05nxpvl

[AllenFang]

@jrae26 I think I can reproduce your case and I hope @lovato had the same issue like your, I will fix it in next version, thanks

[AllenFang]

hello @jrae26 and @lovato this issue is fixed, please at least to upgrade related package listed below to newest version:

https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2019/03/26/version-bump.html