自定義組件失敗，地圖

我嘗試編寫自己的自定義組件，但它不起作用，因爲我希望。交互似乎沒問題，但它只是渲染數組的最後一項。自定義組件失敗，地圖

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

自定義組件失敗，地圖

回答

相關問題