0

我正在尝试使用以下代码在页面中的返回函数中的不同位置呈现数组中的值

   return (
  <div style={{ margin: 30 }}>
    <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>
      Section:</label> {requestDatasource[0].section}
    </div>
    <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>Type: </label> {requestDatasource[0].type}
    </div>
    <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>
      Requested By :     
      </label> {requestDatasource[0].createdBy}
    </div>
   <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>Requested Date: </label>

      {requestDatasource[0].createat}

    </div>
  </div>
 );

我正在用下面这样的值填充数组

if (requestData != null) {
requestData.allRequests.map((code) => {
  requestDatasource.push({
    id: code.id,
    section: code.masterSection.name,
    createdBy: code.createdBy,
    type: code.requestType.name,
    status: code.requestStage.name,
    createat: new Date(code.createdAt),
  });
  return null;
});
}

但不知何故我收到了这个错误

 `Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.`

我不确定这段代码哪里出错了，任何人都可以让我知道上述代码在返回方法中会出现什么问题。

PS：我正在使用 react js 功能组件

提前致谢

4

2 回答 2

0

requestDatasource[0].section，requestDatasource[0].type和/或的值是否可能requestDatasource[0].createdBy是对象？我首先会仔细检查这些值是否符合您的期望。

有点不相关，但我认为您可以map以更好的方式使用，或将其更改为forEach. 您现在使用它的方式是说，“对于 中的每个值requestData.allRequests，将一个新对象推送到requestDatasource。” 你回来null的事实证明你不需要map. 如果您更改map为forEach，您可以删除return null并轻松获胜。

也就是说，我认为您使用的直觉map可能是正确的。而不是push外部的requestDatasource，也许您可​​以使用 , 生成新的数据结构map，并在那里创建requestDatasource：

const requestDatasource = requestData.allRequests.map(code => {
  return {
    id: code.id,
    section: code.masterSection.name,
    createdBy: code.createdBy,
    type: code.requestType.name,
    status: code.requestStage.name,
    createdAt: new Date(code.createdAt)
  };
});
于 2019-12-15T02:44:08.933 回答
0

在 JSX 下，您必须使用原始值，而不是像Date. 所以，修改你的代码：

<div className="form-group form-inline">
  <label style={{ display: 'margin-right:10px' }}>Requested Date: </label>

  {requestDatasource[0].createat.toString()} /* or any other String() */

</div>

这就是当您将代码更新createat: new Date(code.createdAt)为 时createat: code.createdAt，它可以工作的原因，因为现在createat是一个字符串，可以在 JSX 中工作。

您还可以使用其他Date.to***String()方法，例如toUTCString()或toLocaleString()。

于 2019-12-15T18:02:13.500 回答