this.state配列は機能</p> <p>キャッチされない例外TypeErrorで私FlatButton結果を押圧

Question

import React from 'react'; 
import AppCard from './AppCard' 
import FlatButton from 'material-ui/FlatButton' 

export default class Column extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     cards: [] 
    } 
    } 
    render() { 
    return (
     <div> 
     <h3>{this.props.name}</h3> 
     <div>{this 
      .state 
      .cards 
      .map(c => <AppCard>{c}</AppCard>)}</div> 
     <FlatButton 
      onClick={e => this.setState({ 
      cards: this 
      .state 
      .cards 
      .push('asdf') 
     })}>Add new card</FlatButton> 
     </div> 
    ) 
    } 
} 

ない：21：this.state.cards.mapはColumn.render（Column.jsで機能ではありません）

ないcardsは間違いマップであるため、根本的な問題が何であるかを確認します。

Answer 1

これが原因で目の上のあなたのプッシュでありますis.state.cards。

代わりにあなたが行う可能性があります：プッシュは、あなたがプッシュされ、配列が、あなたがプッシュされた値を返すされていないため、

<FlatButton 
      onClick={e => this.setState({ 
      cards: [ ...this.state.cards, 'asdf'] 
     })}>Add new card</FlatButton> 

これがあります。

あなたthis.state.cardsが

---

またはコンソールに次のように入力し「空自」となるように、なぜこれが起こっている、あなたが得るでしょう。

var a = [] 
var b = a.push(1) 
console.log(b) // logs 1 not [1] 

Answer 2

.map機能がarrayでのみ使用可能です。 cardsは、に状態を設定しているため、FlatButtonをプッシュすると、それが予想される形式ではありません。

this.setState({cards: this.state.cards.push('asdf')}); 

これは、カードをpush関数によって返された値に設定します。これは配列ではなく数値です。