[facebook] 경고 : 배열 또는 반복기의 각 하위에는 고유 한 “키”소품이 있어야합니다. `ListView`의 렌더링 방법 확인

Program / 글쓴이

내가 가진 응용 프로그램 내장 ReactNative을 모두 iOS 용 및 안드로이드 ListView. 목록보기를 유효한 데이터 소스로 채울 때 화면 하단에 다음 경고가 인쇄됩니다.

경고 : 배열 또는 반복기의 각 하위에는 고유 한 “키”소품이 있어야합니다. 의 렌더링 방법을 확인하십시오 ListView.

이 경고의 목적은 무엇입니까? 메시지 후 그들은 이 페이지로 연결됩니다 . 여기서 반응 네이티브와는 아무 관련이 없지만 웹 기반 reactjs와 관련된 완전한 다른 것들에 대해 논의합니다.

내 ListView는 다음 문으로 작성됩니다.

render() {
    var store = this.props.store;

    return (

        <ListView
            dataSource={this.state.dataSource}
            renderHeader={this.renderHeader.bind(this)}
            renderRow={this.renderDetailItem.bind(this)}
            renderSeparator={this.renderSeparator.bind(this)}
            style={styles.listView}
            />

    );
}

내 DataSource는 다음과 같이 구성됩니다.

    var detailItems = [];

    detailItems.push( new DetailItem('plain', store.address) );
    detailItems.push( new DetailItem('map', '') );

    if(store.telefon) {
        detailItems.push( new DetailItem('contact', store.telefon, 'Anrufen', 'fontawesome|phone') );
    }
    if(store.email) {
        detailItems.push( new DetailItem('contact', store.email, 'Email', 'fontawesome|envelope') );
    }
    detailItems.push( new DetailItem('moreInfo', '') );

    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(detailItems)
    });

그리고 ListView-Rows는 다음과 같이 렌더링됩니다.

        return (
            <TouchableHighlight underlayColor='#dddddd'>
                <View style={styles.infoRow}>
                    <Icon
                                name={item.icon}
                                size={30}
                                color='gray'
                                style={styles.contactIcon}
                                />
                    <View style={{ flex: 1}}>
                        <Text style={styles.headline}>{item.headline}</Text>
                        <Text style={styles.details}>{item.text}</Text>
                    </View>
                    <View style={styles.separator}/>
                </View>
            </TouchableHighlight>
        );

나에게 완전히 말도 안되는 경고를 제외하고는 모든 것이 정상적으로 작동합니다.

내 “DetailItem”-Class에 키 속성을 추가해도 문제가 해결되지 않았습니다.

이것은 “cloneWithRows”의 결과로 ListView에 실제로 전달되는 것입니다.

_dataBlob:
I/ReactNativeJS( 1293):    { s1:
I/ReactNativeJS( 1293):       [ { key: 2,
I/ReactNativeJS( 1293):           type: 'plain',
I/ReactNativeJS( 1293):           text: 'xxxxxxxxxx',
I/ReactNativeJS( 1293):           headline: '',
I/ReactNativeJS( 1293):           icon: '' },
I/ReactNativeJS( 1293):         { key: 3, type: 'map', text: '', headline: '', icon: '' },
I/ReactNativeJS( 1293):         { key: 4,
I/ReactNativeJS( 1293):           type: 'contact',
I/ReactNativeJS( 1293):           text: '(xxxx) yyyyyy',
I/ReactNativeJS( 1293):           headline: 'Anrufen',
I/ReactNativeJS( 1293):           icon: 'fontawesome|phone' },
I/ReactNativeJS( 1293):         { key: 5,
I/ReactNativeJS( 1293):           type: 'contact',
I/ReactNativeJS( 1293):           text: 'xxxxxxxxx@hotmail.com',
I/ReactNativeJS( 1293):           headline: 'Email',
I/ReactNativeJS( 1293):           icon: 'fontawesome|envelope' },
I/ReactNativeJS( 1293):         { key: 6, type: 'moreInfo', text: '', headline: '', icon: '' } ] },

하나의 키에서 알 수 있듯이 각 레코드에는 키 속성이 있습니다. 경고가 여전히 존재합니다.

답변

내가 했어 정확히 잠시 동안 지금 당신과 같은 문제를, 위의 제안 중 일부보고 후, 나는 마침내 문제를 해결했다.

(적어도 어쨌든 나를 위해) renderSeparator 메서드에서 반환하는 구성 요소에 키 ( ‘key’라는 소품)를 제공해야했습니다. 내 renderRow 또는 renderSectionHeader에 키를 추가해도 아무 작업도 수행되지 않았지만 renderSeparator에 키를 추가하면 경고가 사라졌습니다.

도움이되기를 바랍니다.

답변

키 를 제공해야합니다 .

키 속성이있는 경우 ListView 행에서이 작업을 수행하십시오.

<TouchableHighlight key={item.key} underlayColor='#dddddd'>

그렇지 않은 경우 항목을 키로 추가해보십시오.

<TouchableHighlight key={item} underlayColor='#dddddd'>

답변

반복 횟수 (i)를 다음 key과 같이 사용할 수도 있습니다 .

render() {
    return (
      <ol>
        {this.props.results.map((result, i) => (
          <li key={i}>{result.text}</li>
        ))}
      </ol>
    );
}

답변

다음에서 코드 변경 :

render() {
    return (
      <ol>
        {this.props.results.map((result) => (
          <li>{result.text}</li>
        ))}
      </ol>
    );
}

에: 

render() {
    return (
      <ol>
        {this.props.results.map((result) => (
          <li key={result.id}>{result.text}</li>
        ))}
      </ol>
    );
}

그런 다음 해결되었습니다.

답변

목록의 렌더링 루트 구성 요소에 소품 ‘키’를 추가합니다.

<ScrollView>
      <List>
          {this.state.nationalities.map((prop, key) => {
             return (
               <ListItem key={key}>
                  <Text>{prop.name}</Text>
               </ListItem>
             );
          })}
      </List>
</ScrollView>

답변

이 경고는 목록 항목에 키를 추가하지 않을 때 발생합니다.

키는 React가 어떤 항목이 변경, 추가 또는 제거되었는지 식별하는 데 도움이됩니다. 요소에 안정적인 ID를 제공하려면 배열 내부의 요소에 키를 제공해야합니다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

키를 선택하는 가장 좋은 방법은 형제 중에서 목록 항목을 고유하게 식별하는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 키로 사용합니다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

렌더링 된 항목에 대한 안정적인 ID가없는 경우 마지막 수단으로 항목 인덱스를 키로 사용할 수 있습니다.

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

답변

renderSeparator Component에 속성을 추가하여 수정했습니다. 코드는 다음과 같습니다.

_renderSeparator(sectionID,rowID){
    return (
        <View style={styles.separatorLine} key={"sectionID_"+sectionID+"_rowID_"+rowID}></View>
    );
}

이 경고의 핵심 단어는 “고유”이며 sectionID + rowID는 ListView에서 고유 한 값을 반환합니다.