React：キー付きの子コンポーネントをコンポーネントに送信します。キーは常にnull

Question

キー要素をキーでフィルタリングする子要素にキー要素を送信する際に問題が発生しました。この考え方は、ハンドラーをキーで子にマップし、ハンドラーがキーをフィルターにかけるように切り替えることです。インデックスをキーとして使用することが反パターンであることは分かっていますが、ここでは何が起こっていますか？私はいつもあなたが反復されている任意のDOM要素にキーを渡す必要があり、エラー"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

を取得します。 <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>