React에서 .map()을 사용하는 경우의 빈 배열 처리

React에서 .map()을 사용하는 경우의 빈 배열 처리

리액트가 있어요맵하는 JS 컴포넌트notes표시할 변수입니다.

그러나 메모가 없고 에러가 나는 문제에 부딪혔다.어떻게 접근하면 좋을까요?

코드는 다음과 같습니다.

import React, {Component} from 'react';


class List extends Component {
    constructor(props){
      super(props);
    }

render(){
  var notes = this.props.items.map((item, i)=>{
      return(
          <li className="listLink" key={i}>
              <p>{item.title}</p>
              <span>{item.content}</span>
          </li>
          )
      });
    return(
      <div className='list'>

          {notes}

      </div>
    );
  }
}

export default List;

하나 이상의 노트가 있을 때 노트를 렌더링하고 배열에 노트가 없을 때 기본 보기를 렌더링하려면 렌더링 함수의 반환 식을 다음과 같이 변경할 수 있습니다.

return(
  <div className='list'>
      {notes.length ? notes : <p>Default Markup</p>}
  </div>
);

JavaScript의 빈 배열은 truthy이므로 배열의 부울 값뿐만 아니라 배열의 길이를 확인해야 합니다.

주의해 주세요.items프로포트는 늘입니다.그러면 예외는 발생하게 됩니다.왜냐하면 전화를 걸기 때문입니다.mapnull 값으로 설정합니다.이 경우 페이스북의 프롭타입 라이브러리를 사용하여items빈 배열로 이동합니다.그렇게 하면items세팅도 안 되고 컴포넌트도 고장나지 않아요.

여기 가장 간단한 방법이 있습니다.

  import React, {Component} from 'react';


class List extends Component {
    constructor(props){
      super(props);
    }

render(){
  var notes = this.props.items?.map((item, i)=>{
      return(
          <li className="listLink" key={i}>
              <p>{item.title}</p>
              <span>{item.content}</span>
          </li>
          )
      });
    return(
      <div className='list'>

          {notes}

      </div>
    );
  }
}

export default List;

매핑한 배열에 "?"를 추가해 보십시오.

폴백 값을 설정할 수 있습니다.this.props.item

render() {
  const items = this.props.items || [] // if there's no items, give empty array
  const notes = items.map((item, i) => {
  return(
      ....

하고있다.map()on empty array는 오류를 발생시키지 않고 빈 어레이를 반환합니다.빈 어레이는 리액션에서 렌더링 가능한 항목이며 다음 중 오류가 발생하지 않으므로 이 경우에도 문제가 없습니다.render()제공된 노트가 없으므로 노트를 렌더링하지 않습니다.

컴포넌트에서 defaultProps 속성을 설정하여 초기값을 소품으로 설정할 수 있습니다.

static defaultProps = {
    items: []
};

언급URL : https://stackoverflow.com/questions/49268267/dealing-with-an-empty-array-when-using-map-in-react