Benutzerdefinierte Komponente mit Karte fehlgeschlagen

Question

Ich versuche zu schreiben, um meine eigene benutzerdefinierte Komponente zu erstellen, aber es funktioniert nicht, wie ich es wünsche. Die Interaktion scheint in Ordnung zu sein, aber es wird nur das letzte Element der Arrays gerendert.

export default class MyComponent extends Component { 

    constructor() { 
     super() 

     this.state = { 
      openItems: false, 
      selectedItem: 'Please select' 
     } 
    } 

    render() { 

     const { items, className } = this.props 
     const { openItems, selectedItem } = this.state 

     return (
      <div className={classnames('myComponent', className)}> 
       <div tabIndex="1" 
        onBlur={() => this.setState({ openItems: false })} 
        onFocus={() => this.setState({ openItems: true })}> 
        {selectedItem} 

        <div className={classnames({'show': openItems === true, 'hide': openItems === false})}> 
         {items.map((obj, i) => { 
          return(
           <li onClick={() => this.setState({ selectedItem: obj.name, openItems: false })} 
            key={i}> 
            {obj.name} 
           </li> 
          ) 
         })} 
        </div> 
       </div>    
      </div> 
     ) 
    } 
} 

und irgendwo habe ich die Komponente wie diese

<MyComponent items={[{ 
            name: 'abc', 
            name: 'def', 
            name: 123 
           }]} /> 

ich keine Ahnung, was der Fehler ist.

Answer 1

Ihre Komponente erwartet, ein Array von Objekt mit dem Schlüssel name. Wenn Sie Ihre Komponente initialisiert haben, haben Sie nur in einem einzigen Objekt mit dem Schlüssel name bestanden dupliziert dreimal:

<MyComponent items={[{ 
    name: 'abc', 
    name: 'def', // <-- this overrides the previous 'abc' 
    name: 123 // <-- this overrides the previous 'def' 
}]} /> 

Was wollen Sie, ist dies:

<MyComponent items={[ 
    { name: 'abc' }, 
    { name: 'def' }, 
    { name: 123 }, 
]} /> 

Answer 2

Sie scheinen das gleiche Objekt zu passieren name dreimal, dies überschreibt die vorherigen Werte und der letzte Wert wird die endgültige Form annehmen. Überlegen Sie, verschiedene Werte mit unterschiedlichen Namen zu übergeben.

<MyComponent items={[{ name: 'abc', 
         name: 'def', 
         name: 123 
         }]} /> 

Answer 3

die Requisiten in den Pass Konstruktor-Methode, wie ich bin auf der Suche, um die Requisiten nicht so bestanden haben, wollen wir versuchen, Requisiten in den Konstruktor wie unten angegeben hinzuzufügen: -

constructor(props) { 
    super(props) 

    this.state = { 
     openItems: false, 
     selectedItem: 'Please select' 
    } 
}