如何在 map React JS 中使用 null

Question

我正在用 React JS 制作一个应用程序。它由用户列表组成，用户可以使用、获取或请求书籍，但是当根据用户从商店中过滤书籍时，无效用户的行仍然到达。

return (
    <div>
      <h1>List of Books</h1>
      {filterValues.map((books) => (
        <Segment.Group key={books.id}>
          {(books.name === user!.username || books.name === null) &&
          (books.requestedBy === user!.username ||
            books.requestedBy === null) ? (
            <Segment>
              <Item.Group>
                <Item>
                  {console.log(books)}
                  <Item.Image size="tiny" circular src="/assets/books.jpg" />
                  <Item.Content>
                    <Item.Header as="a">{books.bookName}</Item.Header>
                    <Item.Description>
                      {books.isRequested ? (
                        <Button
                          name={books.bookName}
                          loading={target === books.bookName && submitting}
                          onClick={(e) => onRequestClick(e, "cancel", books.id)}
                          color="red"
                          type="button"
                          content="Cancel Request"
                        />
                      ) : books.isTaken ? (
                        <div>
                          <Label basic color="red">
                            This book is taken By you
                          </Label>
                          <Button
                            name={`return${books.bookName}`}
                            loading={
                              target === "return" + books.bookName && submitting
                            }
                            color="brown"
                            onClick={(e) => returnBook(e, books.id)}
                            type="button"
                            content="Return this Book"
                          />
                        </div>
                      ) : (
                        <Button
                          name={books.bookName}
                          loading={target === books.bookName && submitting}
                          onClick={(e) =>
                            onRequestClick(e, "request", books.id)
                          }
                          color="green"
                          type="button"
                          content="Request For Book"
                        />
                      )}
                    </Item.Description>
                  </Item.Content>
                </Item>
              </Item.Group>
            </Segment>
          ) : null}
        </Segment.Group>
      ))}

      <Segment clearing></Segment>
    </div>
  );

例如，对于图书列表，我在地图中过滤了 5 本书，UI 类似于：

我怎样才能删除那些行

Answer 1

我认为这是因为您正在检查 <Segment.Group:

{filterValues.map(books => (
                <Segment.Group  key={books.id}>
                    {((books.name === user!.username || books.name === null) && (books.requestedBy === user!.username || books.requestedBy === null))
                       ? /* CREATE THE ITEM */ 
                       : null
                    }
                </Segment.Group>
))}

因此，当它被评估为 null 时，它仍然会创建一个 <Segment.Group>，它在 UI 中显示为空项。

Answer 2

您的过滤逻辑放置在 .map 原型方法本身中，因此当您返回 null 时，它仍然放置在一个空的 <Segment.Group> 元素中。因此我猜想这个元素提供了导致呈现这些线条的样式。

如果您想真正过滤结果并忽略不匹配的 returns，最好先对您的数组调用 .filter() 并忽略返回的空值通过地图：


{
    filterValues
        .filter(books =>
            (books.name === user!.username || books.name === null)
            && (books.requestedBy === user!.username || books.requestedBy === null)
        ).map(books =>
                <Segment.Group  key={books.id}>
                    // Segment items here without the conditional rendering of elements
                </Segment.Group>
        )
}

如何在 map React JS 中使用 null

How to user null in map React JS

javascript

ecmascript-6

reactjs

semantic-ui