Antd에서 List 구성 요소 재사용

최근 List 어셈블리를 사용하는 동안 어셈블리가 다시 렌더링되지 않아 상태 전송 오류가 발생했습니다.우선 코드를 다시 보여 드리겠습니다.

function Other() {
  const [data, setData] = useState([6, 7, 8, 3, 4, 5])
  function handleData() {
    setData([6, 7, 8, 9])
  }
  function handleData1() {
    setData([6,7,8])
  }
  return (
    <>
      12
      12
      }>
      
    >
  )
}

function ListData(props) {
  const [check, setCheck] = useState(false)
  console.log(check)
  return 
 setCheck(!check)}>{props.list}{check?"  true":"   false"}
}
export default Other

여기서 List 구성 요소를 사용했습니다. 이것은 매우 자주 사용하는 구성 요소입니다.
그러나 우리가 버튼을 눌렀을 때 6, 7, 8 세 개의 구성 요소가 다시 렌더링되지 않은 것을 발견했다.
우리는 맵키의 유일한 문제를 쉽게 생각할 수 있다.그런데 저희가 이렇게 고치면...

      }>
      
      //or
            }>
      

우리는 여전히 쓸모가 없다는 것을 발견할 것이다.어셈블리가 중복된 렌더링되지 않았는지 여부
우리가antd 문서를 볼 때, 이 해결 방안에 대한props도 없습니다.
그래서 저희가 원본을 보러 가야 돼요.

  renderItem = (item: any, index: number) => {
    const { renderItem, rowKey } = this.props;
    let key;

    if (typeof rowKey === 'function') {
      key = rowKey(item);
    } else if (typeof rowKey === 'string') {
      key = item[rowKey];
    } else {
      key = item.key;
    }

    if (!key) {
      key = `list-item-${index}`;
    }

    this.keys[index] = key;

    return renderItem(item, index);
  };

so, 이 코드를 보고 이름을 보면 rowKey라는 속성을 알 수 있습니다. 바로 우리가 사용해야 할 방법입니다.그래서 저희가 코드를 수정할 거예요.

      uuid()} renderItem={(item,index)=>}>
      

이렇게 하면 구성 요소가 다시 렌더링되지 않는 문제를 해결할 수 있다