Блог

Я получаю сообщение об ошибке на моем app.js внезапно. Я новичок в React и не совсем уверен, что с этим делать, я пытаюсь создать приложение CRUD здесь, оно работало правильно, но остановилось и постоянно выдает эту ошибку

Ошибка типа: this.state.DataSource.map не является функцией

App.render C:/Users/dksmi/beer-list/src/App.js:62

   59 | <div className="App">
  60 | <h1>What's in My Fridge?</h1>
  61 | 
> 62 | <AddItem
     | ^  63 |   onAdd={this.onAdd}
  64 | />
  65 | 


import React, { Component } from 'react';
import './App.css';
import AddItem from './AddItem';
import SingleItem from './singleItem';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      isLoaded: false,
    }
    this.onAdd = this.onAdd.bind(this);
    this.onDelete = this.onDelete.bind(this);
  }

  componentWillMount() {
    const dataSource = this.getDataSource();

    this.setState({dataSource});
  }

getDataSource() {
  return fetch('https://beer.fluentcloud.com/v1/beer')
    .then(response => response.json())
    .then(responseJson => {
      this.setState({
        isLoaded: true,
        dataSource: responseJson,
      });
    })
    .catch(error => console.log(error)); //to catch the errors if any
}

onAdd( name, likes) {
  const dataSource = this.getDataSource();

  dataSource.push({
    name,
    likes
  });
  this.setState({dataSource});
}

onDelete(name) {
  const dataSource = this.dataSource();

  const filteredDataSource = dataSource.filter(dataSource => {
    return dataSource.name !== name;

  });
  this.setState({ dataSource: filteredDataSource});
}

  render() {
    var {isLoaded, dataSource} = this.state;
    return (
      <div className="App">
      <h1>What's in My Fridge?</h1>

      <AddItem
        onAdd={this.onAdd}
      />

          {
            this.state.dataSource.map(dataSource => {
              return (
                <SingleItem
                  key={dataSource.name}
                  name={dataSource.name}
                  likes={dataSource.likes}
                  onDelete={this.onDelete}
                />
              );
            })
          }




      </div>
    );
  }
}

export default App;
  

Это неверно:

 getDataSource() {
  return fetch('https://beer.fluentcloud.com/v1/beer')
    .then(response => response.json())
    .then(responseJson => {
      this.setState({
        isLoaded: true,
        dataSource: responseJson,
      });
    })
    .catch(error => console.log(error)); //to catch the errors if any
}

onAdd( name, likes) {
  const dataSource = this.getDataSource();

  dataSource.push({
    name,
    likes
  });
  this.setState({dataSource});
}
  

Ваша getDataSource функция не возвращает JSON, как вы, кажется, ожидаете. возможно, вы могли бы изменить код на

 getDataSource() {
  return fetch('https://beer.fluentcloud.com/v1/beer')
    .then(response => response.json())
    .then(responseJson => {
      this.setState({
        isLoaded: true,
        dataSource: responseJson,
      });
      return responseJson;
    })
    .catch(error => console.log(error)); //to catch the errors if any
}
  

для того, чтобы вернуть обещание для JSON, а затем использовать его как

   const dataSource = this.getDataSource();
  dataSource.then(json => {
    json.push({
      name,
      likes
    });
    this.setState({dataSource: json});
  });