this.state.names.map 不是 function

Question

這是我的代碼，我只需要從 API 獲取數據並想要 map 它但我做不到我不知道為什么。 我已經瀏覽了所有的視頻教程，但仍然找不到我的問題。

    class App extends Component {
    state = {
        names: [],
        isLoaded: false,
    }
    constructor(props) {
      super(props);
    }
    componentDidMount() {
      fetch("https://dog.ceo/api/breeds/list/all")
      .then(res => res.json())
      .then(name => {
        this.setState({
          names: name,
          isLoaded: true,
        })
      });  
    }
    renderNames() {
    if(this.state.names.length > 0) {
      return this.state.names.map((breed) =>
        <div key={breed.message}>
        {breed.message}
        {breed.status}
        </div>
      )  
    }
    else{
        return;

    render(){

每次我找到這種狀態破壞一切的方式時，這個加載也是一個問題

      if (!this.state.isLoaded)  {
        return <div>loading....</div>
      }
      else{
        return (
          <div className="App">
          <h1>Choose a name of breed</h1>
          {this.renderNames()}


          </div>

Answer 1

this綁定到構造函數中的renderNames 。 喜歡：

constructor(props) { super(props); this.renderNames = this.renderNames.bind(this) }

或者

將renderNames為箭頭 function。 例如

renderNames = () => { //Your code. }

Answer 2

首先要做的事情...重新安排您的代碼..將您的 state 放在構造函數中..然后... Console.log 從 promise 中記錄您的名稱值，看看數據是否實際存在...然后我們將知道下一步去做。