ReactJS : 전체 이름으로 만 목록 렌더링을 필터링합니까?

debugcn 에 게시 Dev

다니엘

현재 map()다음과 같은 함수를 사용하여 API에서 반환 된 데이터 목록을 렌더링하고 있습니다.

renderLocation() {
    return this.props.locations.map(location => {
      return (
        <div key={location.id}>
          <div className="location">
            <h1>
              {location.name}
              {location.airport_code}
            </h1>
            <div className="location-secondary-info">
              <span>
                <i className="material-icons">airplanemode_active</i>
                {location.description}
              </span>
            </div>
          </div>
        </div>
      );
    });
  }

이제 렌더링을 필터링하여 locations올바른 name필드 값 을 가진 항목 만 렌더링되도록 합니다. 내 API 데이터는 다음과 같습니다.

실제로 유효한 도시 이름 인 locations경우 에만 렌더링 되고 싶습니다 locations.name.

그래서 예를 들면,이있는 위치 name의이 "Chicago O'Hare"유효한 도시 이름이 될 것이며, 표시되어야합니다. 기호가있는 위치 name의 "Chicago O'Hare A5C"그러나, 그것은이있다보고 렌더링하지 않아야 A5C을 유효하게 끝.

Dacre Denny

한 가지 접근 방식은 정규식을 사용 name하여 다음을 통해 위치 필드 에 영숫자 하위 문자열 접미사가 있는지 여부에 따라 위치를 필터링하는 것입니다 .

const filteredLocations = this.props.locations.filter(location => {
    return !location.name.match(/[A-Z0-9]+$/)
});

위의 논리는 기본적으로 다음과 같이 말합니다.

"위치 이름 끝에 영숫자 단어가없는 모든 위치 필터링" .

이를 renderLocation()함수에 통합하는 방법은 다음과 같습니다.

renderLocation() {

    /* Filter locations with name that doesn't have alphanumeric suffix word   */
    const filteredLocations = this.props.locations.filter(location => {
        return !location.name.match(/[A-Z0-9]+$/)
    });

    /* Render only the filtered location with name Chicago O'Hare */ 
    return filteredLocations.map(location => {
      return (
        <div key={location.id}>
          <div className="location">
            <h1>
              {location.name}
              {location.airport_code}
            </h1>
            <div className="location-secondary-info">
              <span>
                <i className="material-icons">airplanemode_active</i>
                {location.description}
              </span>
            </div>
          </div>
        </div>
      );
   });
}

도움이되는 희망

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

ReactJS : 전체 이름으로 만 목록 렌더링을 필터링합니까?

ReactJS : 전체 이름으로 만 목록 렌더링을 필터링합니까?

ReactJs React-Redux에서 목록의 한 항목 만 생성되거나 업데이트 될 때 전체 항목 목록을 다시 렌더링하는 것을 중지하는 방법은 무엇입니까?

ReactJS로 항목 목록 렌더링

notifyItemInserted는 전체 목록을 다시 렌더링합니다.

제목과 URL을 모두 읽는 스크립트의 전체 사이트 맵을 목록으로 렌더링하려면 어떻게해야합니까?

Owl carousel 렌더링 목록 항목을 요소로 만들려면 어떻게해야합니까?

React Redux + Infinite Scroll = 전체 목록을 다시 렌더링합니까?

LINQ로 두 목록을 필터링하여 사전 만들기

사전 객체를 포함하는 목록의 경우 키 값을 기준으로 목록을 어떻게 필터링합니까?

ReactJS가 localhost에서만 차트의 데이터 값을 렌더링하는 이유는 무엇입니까?

문자열 목록을 필터링하고 친구 이름 만 포함 된 목록을 반환합니다.

reactjs에서 전체 HTML을 렌더링하는 방법

그리드 항목을 한 행으로 렌더링-ReactJS 및 Material-UI

Ember는 속성 이름으로 목록을 필터링합니다.

목록보기를 렌더링했지만 여전히 단추 클릭 이벤트에있는 지점을 검색 할 수 없습니다.

단일 항목을 변경할 때 전체 목록 다시 렌더링

Ansible은 한 필드에 고유 한 값만 포함하도록 사전 목록을 필터링합니다.

Pandas는 사전 목록의 값으로 데이터 프레임을 필터링합니다.

Django는 ajax를 통해 json 데이터 목록을 렌더링합니다.

ReactJS 및 Redux로 목록의 항목을 필터링하는 방법은 무엇입니까?

스타일 구성 요소-소품을 기반으로 전체 CSS 블록을 조건부로 렌더링

Phoenix.HTML로 요소 목록을 어떻게 렌더링합니까?

장고 웹 사이트 렌더링을 전체적으로 엉망으로 만듭니다 (항상 그런 것은 아닙니다)

항목이 제거 된 후 ReactJS 상위 / 하위 목록 항목이 제대로 렌더링되지 않음

Symfony 형식으로 개체 배열을 만들고 렌더링하는 방법

한 열의 열 값으로 목록을 만들고 다른 열의 값을 필터링합니다.

KonvaJs-ReactJs 동적으로 객체를 렌더링

React Native 목록보기가 전체 목록을 렌더링하지 않습니다.

CSS로 ReactJS 렌더링

reactjs 1.0에서 jsx로 객체 배열을 렌더링하는 방법은 무엇입니까?