在 return 函数 react js 中动态渲染数组

Question

我正在尝试使用以下代码

在页面的 return 函数中的不同位置呈现数组的值

   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.`

我不确定这段代码哪里出错了，谁能告诉我上面的代码在 return 方法中会出现什么问题。

PS: 我正在使用 React js 功能组件

提前致谢

Answer 1

有没有可能requestDatasource[0].section, requestDatasource[0].type, and/or requestDatasource[0].createdBy的值都是Object？首先，我会仔细检查这些值是否符合您的预期。

有点不相关，但我认为您可以更好地使用 map，或者将其更改为 forEach。你现在使用它的方式是说，"For each value in requestData.allRequests, push a new object to 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)
  };
});

Answer 2

在 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()。

在 return 函数 react js 中动态渲染数组

dynamically render the array at different labels inside return function react js

javascript

arrays

reactjs

react-functional-component