时间戳

首页 > 解决方案 > 在返回函数反应js中的不同标签处动态呈现数组

javascript - 在返回函数反应js中的不同标签处动态呈现数组

问题描述

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

   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 功能组件

提前致谢

标签： javascriptarraysreactjsreact-functional-component

解决方案

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)
  };
});

推荐阅读