自定义组件失败，地图

我尝试编写自己的自定义组件，但它不起作用，因为我希望。交互似乎没问题，但它只是渲染数组的最后一项。自定义组件失败，地图

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> 
     ) 
    } 
}

和地方我使用的成分这样

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

我不知道这个错误是什么。

来源

2017-08-16 Cecilia Chan

试图通过对象的数组：[{名称：“ABC”}，{名称：'def'}，{名称： 123}] 你现在只有一个对象在数组中。 – AppleJam

嘿！你可能会提到这个问题中的错误。 –

您的组件需要一个带有密钥name的对象数组。当你初始化你的组件，你只单个对象通过与关键name重复三次：

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

你想要的是这样的：

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

来源

2017-08-16 11:55:49

您似乎通过相同的对象name三次，这将覆盖以前的值和最新的值将采取最后的形式。考虑以不同的名称传递不同的值。

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

来源

2017-08-16 11:46:38 kotAPI

通过道具进入构造方法，我找你有没有通过道具让我们尝试的道具添加到构造下面给出： -

constructor(props) { 
    super(props) 

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

来源

2017-08-16 12:02:35

自定义组件失败，地图

回答

相关问题