Question

以下示例的沙箱位于here。

我有一个时间表表，可以将其标记为通过滑块导出。如果将日程表标记为要导出，则以下函数将使用值id更新数组。因此，例如，如果将两个调度标记为要导出，则更新后的数组将如下所示：["704", "1403"]。

然后，将更新后的数组中的值镜像到另一个表中，该表显示它们确实已标记为要导出。如果您查看沙盒，它仅呈现id，但我希望每个时间表中的所有值都呈现在导出表中。

  slider = ({ id, startTime, selfUri, status, isExported }) => {
    if (isExported === true) {
      this.setState(
        {
          scheduleIdsToExport: [id, ...this.state.scheduleIdsToExport],
          startTime,
          selfUri,
          status
        },
        () => console.log(this.state.scheduleIdsToExport)
      );
    } else {
      const newArray = this.state.scheduleIdsToExport.filter(
        storedId => storedId !== id,
        storedSelfUri => storedSelfUri !== selfUri
      );
      this.setState(
        {
          scheduleIdsToExport: newArray
        },
        () => console.log(this.state.scheduleIdsToExport)
      );
    }
  };

我正在更新的数组schedulesIdsToExport上进行映射，以呈现在导出表中，如下所示：

<Table.Body>
  {Object.keys(scheduleIdsToExport)
    .filter(id => id !== undefined)
    .map(id => {
      return (
        <Table.Row>
          <Table.Cell>{scheduleIdsToExport[id]}</Table.Cell>
        </Table.Row>
      );
    })}
</Table.Body>

我希望保持数组scheduleIdsToExport完好无损，但也希望拥有一个包含所有计划及其值的数组schedulesToExport，以便可以在呈现导出表时使用它。

所以我需要将schedules的所有键添加到.map()吗？我尝试了几种不同的安排，但结果却很奇怪。

编辑：更改为滑块功能，但渲染仍然遇到问题

  slider = ({ id, startTime, selfUri, status, isExported }) => {
    if (isExported === true) {
      this.setState(
        {
          scheduleIdsToExport: [id, ...this.state.scheduleIdsToExport],
          schedulesToExport: [
            id,
            status,
            selfUri,
            startTime,
            ...this.state.schedulesToExport
          ]
        },
        () => {
          console.log(this.state.scheduleIdsToExport);
          console.log(this.state.schedulesToExport);
        }
      ); ...
  };

Answer 1

你为什么不这样做？

<Table.Body>
  {schedules
    .filter(schedule => scheduleIdsToExport.includes(schedule.id))
    .map(item => {
         return (
           <Table.Row>
              <Table.Cell>{item.id}</Table.Cell>
              <Table.Cell>{item.startTime}</Table.Cell>
              <Table.Cell>{item.selfUri}</Table.Cell>
              <Table.Cell>{item.status}</Table.Cell>
            </Table.Row>
         );
     })}
</Table.Body>

过滤并映射更新后的数组，并在表中呈现

1 个答案: