this.state массива в reactjs карты не является функция

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

нажав мои результаты FlatButton в

неперехваченного TypeError: this.state.cards.map не является функция в Column.render (Column.js: 21)

Не уверен, что основная проблема, поскольку cards определенно карта:

Answer 1

Это из-за вашего нажатия на го is.state.cards.

Вместо этого вы могли бы сделать:

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

Это происходит потому, что толчок не возвращает массив, толкал, но значение, которое вы толкнули.

Так что ваши this.state.cards становится «ASDF»

---

Или введите следующую команду на консоли, вы будете получать, почему это происходит.

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

Answer 2

.map функция доступна только на array. Похоже, что cards не в том формате, который вы ожидаете от него, потому что когда вы нажимаете FlatButton, вы устанавливаете состояние на Number.

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

это установит карты на значение, возвращаемое функцией push, и это номер, а не массив.