Reagieren: gesendete untergeordnete Elemente an eine Komponente senden. Keys immer null

Question

Ich habe ein Problem beim Senden von Keyed-Elementen an ein Kind-Element, das diese Kinder nach Schlüssel filtern wird. Die Idee besteht darin, die Handler anhand des Schlüssels den Kindern zuzuordnen, und die Handler werden den zu filternden Schlüssel umschalten. Ich weiß, dass der Index als Schlüssel ein Antipattern ist, aber was ist hier los? Ich bekomme immer den Fehler "Warning: Each child in an array or iterator should have a unique "key" prop.

render: function() { return ( <Frame> <Frame> <Navbar isLoggedIn={true} handlers={this.handlers}> {this.props.children.map(function(child, i) { return ( <button onClick={this.handlers[i]}>{child.props.text || 'Checkout item ' + i}</button> ) }.bind(this))} </Navbar> </Frame> {this.props.isLoading ? <Loading /> : <Filter filter={function(child) { return String(this.props.displayed) === child.key; }.bind(this)}> {this.props.children.map(function(child, i) { return (<div key={i}><child /></div>) })} </Filter>} </Frame> ) }

function Filter (props) { return ( <div> {Array.isArray(props) ? props.children.filter(function(child) { return props.filter(child); }) : props.children} </div> ) };

Answer 1

Sie benötigen einen Schlüssel zu einem DOM-Element passieren iteriert werden. Sie fehlen in <button>.

<Navbar isLoggedIn={true} handlers={this.handlers}> 
    {this.props.children.map(function(child, i) { 
    return (
     <button key={i} onClick={this.handlers[i]}>{child.props.text || 'Checkout item ' + i}</button> 
    ) 
    }.bind(this))} 
</Navbar>