reactjs - 将映射状态反应到列表项

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>

标签： reactjsmapping

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