反应映射状态到列表项

Question

我无法将自己的状态映射到一系列列表项中。出于某种原因，dom呈现了映射列表，然后突然出现错误：无法读取未定义的属性“ map”

我遗漏了一些非常明显的东西，但找不到！ ;（

 state={
    allCards: '',
    currentDeck: [
      {
        name: 'card1',
        color: 'black',
      },
      {
        name: 'card2',
        color: 'blue',
      },
      {
        name: 'card3',
        color: 'red',
      }
    ],
    blue: 1,
    black: 1,
    white: 1,
    green: 1,
    red: 1
  }

<div className="currentD">
              <h4>Deck List</h4>
              <ul>
              {
                  this.state.currentDeck.map((card)=>{
                    return(
                      <li>{card.name}</li>
                    )
                  })
              }
              </ul>
            </div>

Answer 1

您可以检查此-您的代码是否正常-https://codesandbox.io/s/zealous-ellis-uw5rd

export default class App extends React.Component {
  state = {
    allCards: "",
    currentDeck: [
      {
        name: "card1",
        color: "black"
      },
      {
        name: "card2",
        color: "blue"
      },
      {
        name: "card3",
        color: "red"
      }
    ],
    blue: 1,
    black: 1,
    white: 1,
    green: 1,
    red: 1
  };
  render() {
    return (
      <div className="App">
        <ul>
          {this.state.currentDeck.map((card, index) => (
            <li key={index}>
              {card.name}-{card.color}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}