问如何在map React JS中使用null
EN

Stack Overflow用户

提问于 2020-07-26 10:06:29

回答 2查看 62关注 0票数 0

我正在用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如下所示：

如何删除这些行？

ecmascript-6

semantic-ui

javascript

reactjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-07-26 10:44:00

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

如果您希望真正过滤结果并省略不匹配结果的任何返回，最好先在数组上调用.filter()并省略由map返回的空值：

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

票数 3

Stack Overflow用户

发布于 2020-07-26 10:16:58

我认为这是因为您在<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>
))}