这令人难以置信。反应 JS。我不知道为什么会这样

Question

我正在尝试通过从 api 获取 json 列表来显示国家/地区表。该 api 返回嵌套对象，因此我无法直接在表格中显示它，因为不允许使用对象。 示例 api 响应是这样的：

[
 {
        "id": 5,
        "country_code": "AS",
        "country_name": "American Samoa",
        "region_id": {
            "id": 2,
            "region_name": "Region 2",
        }
    },
    {
        "id": 6,
        "country_code": "AD",
        "country_name": "Andorra",
        "region_id": {
            "id": 1,
            "region_name": "Region 1",
        }
    },
]

我的App.js如下。

class App extends Component {
  componentDidMount() {
    store.dispatch(loadUser());
    store.dispatch(getCountries());     //this makes request to api (given below)
  }

  render() {
    return (
      <Provider store={store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Fragment>
            <Alerts />
            <Router history={history}>
              <main>
                <Route exact path="/" component={Home} />
                <Route path="/login" component={Login} />
                <Route path="/register" component={Register} />
                <Route path="/forgotpassword" component={Forgot} />
                <Route path="/logout" component={Logout} />
                <Route path="/admin/dashboard" component={dashContent} />
                <Route path="/admin/countries" component={Countries} />
               ...
               ...
              </main>
            </Router>
          </Fragment>
        </AlertProvider>
      </Provider>
    );
  }
}

export default App;

这是获取国家/地区列表的功能。它存储在另一个包含操作和减速器的文件中。

export const getCountries = () => (dispatch, getState) => {
  axios
    .get("http://127.0.0.1:8000/api/countries/", tokenConfig(getState))
    .then((res) => {
      dispatch({
        type: GET_COUNTRIES,
        payload: res.data,
      });
      console.log(res.data);      //remember this log, this tells me the issue
    })
    .catch((err) =>
      dispatch(returnErrors(err.response.data, err.response.status))
    );
};

我的表是MaterialTable，如下。

const columns = [
  { title: "Code", field: "country_code" },
  { title: "Name", field: "country_name" },
  { title: "Region", field: "region_id", type: "numeric" },
];

render(){
 <MaterialTable
  title="Countries"
  columns={columns}
  data={this.getTableData()}
  ...
  .../>
}

由于我无法将对象放入表中，因此我必须将该字段替换为我想在该列中显示的字符串。我创建了以下函数，它遍历列表并将 region_id 对象替换为区域名称。

getTableData() {
    var data = this.props.countries;         // api response list to the props of the class
    for (var i = 0; i < data.length; i++) {
      if (data[i].region_id) {
        data[i].region_id = data[i].region_id.region_name;
      } else {
        data[i].region_id = "Not selected";
      }
    }
    return data;
  }

在我的表中，我根本没有得到任何值。甚至没有 else 条件。

实际上，表格会显示所有值一秒钟，然后消失。这可能是因为组件在商店更新时重新渲染。

问题是，我上面提到的console.log(res) 记录了data 变量值，而不是来自api 的实际响应。当我注释掉函数时，它会显示实际的 api 响应。为什么会这样？

另外，当我刷新页面时，我的这个页面的 componentDidMount() 首先记录，而不是 App.js 的 componentDidMount()。不是先加载app.js吗？

我只需要一个显示表格数据的解决方案，另一个表格数据函数可能会这样做，但我不知道有任何其他方法。

Answer 1

getTableData() {
    var data = this.props.countries;         // api response list to the props of the class
    for (var i = 0; i < data.length; i++) {
      if (data[i].region_id) {
        data[i].region_id = data[i].region_id.region_name;  //try returning them
        return dat[i].region_id;
      } else {
        data[i].region_id = "Not selected"; //return this also
        return dat[i].region_id;
      }
    }
    return data;
  }

您必须返回值才能获取它们。如果有帮助，请点赞