React：将键控子级发送到组件。键总是空的

Question

我在将键控元素发送到将按键过滤这些子元素的子元素时遇到问题。这个想法是通过键将处理程序映射到子项，并且处理程序将切换要过滤的键。我知道使用索引作为键是一种反模式，但这是怎么回事呢？我总是收到错误 "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

您需要将键传递给正在迭代的任何 DOM 元素。 <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>

React：将键控子级发送到组件。键总是空的

React: send keyed children to a component. Keys always null

reactjs

redux

react-redux