Question

我正在尝试允许对我的API数据列表进行编辑。它允许我编辑列表条目，但是当我提交版本时，出现一条错误消息

   `this.getDataSource();`

不是功能。我已经尝试调试了一段时间，但没有运气。

此外，如果有人对如何使它成为一个完全可操作的CRUD应用程序有一些建议或指导，该应用程序允许将新条目重新发布回API，还允许将版本重新放入该API，会很好。我不确定我是否必须修改获取请求，或者我是否完全不在此处。

任何帮助将不胜感激！！！

My App.js code-

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.onEditSubmit = this.onEditSubmit.bind(this);
  }

  componentDidMount() {
    this.getDataSource();

  }

  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
  }
onAdd( name, likes) {
  const dataSource = this.getDataSource();
    dataSource.then(json => {
      json.push({
        name,
        likes
      });
      this.setState({dataSource: json});
    });
}


onEditSubmit (name, likes, originalName) {
    let dataSource = this.getdataSource();

    dataSource = dataSource.map((dataSource) => {
      if (dataSource.name === originalName) {
        dataSource.name = name;
        dataSource.likes = likes;
      }
      return dataSource;
    });
    this.setState({dataSource});
}

  render() {

    return (
      <div className="App">
      <h1>What is in My Fridge?</h1>

      <AddItem
        onAdd={this.onAdd}
      />

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




      </div>
    );
  }
}

export default App;

我的AddItem.js组件代码-

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

class AddItem extends Component {
  constructor(props) {
    super(props);

    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(event) {
    event.preventDefault();

    this.props.onAdd(this.nameInput.value, this.likesInput.value);
    this.nameInput.value = '';
    this.likesInput.value = '';
  }

  render() {
    return (
      <form onSubmit={this.onSubmit}>
      <h3>Add Beer</h3>
        <input placeholder="Name" ref={nameInput => this.nameInput = nameInput} />
        <input placeholder="Likes" ref={likesInput => this.likesInput = likesInput}/>
        <button>Add</button>
        <hr />
      </form>
    );
  }
}

export default AddItem;

我的singleItem.js代码-

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


class SingleItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEdit: false
    };


    this.onEdit = this.onEdit.bind(this);
    this.onEditSubmit = this.onEditSubmit.bind(this);
  }


  onEdit() {
    this.setState({ isEdit: true });
  }

  onEditSubmit(event) {
    event.preventDefault();

    this.props.onEditSubmit(this.nameInput.value, this.likesInput.value, this.props.name);
    this.setState({ isEdit: false });

  }

  render() {
    const { name, likes } = this.props;
    return (
      <div>
        {
          this.state.isEdit
            ? (
              <form onSubmit={this.onEditSubmit}>
              <input placeholder="Name" ref={nameInput => this.nameInput = nameInput} defaultValue={name}/>
              <input placeholder="Likes" ref={likesInput => this.likesInput = likesInput} defaultValue={likes}/>
              <button>Save</button>
                </form>
            )
            :   (
              <div>
      <li>
        {name} | Likes:  {likes}
      </li>
      <button onClick={this.onEdit}>Edit</button>

       </div>
)
}
      </div>
    );
  }
}

export default SingleItem;

Answer 1

我认为您的东西可能出现故障了？你可以试试吗？

  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
  }
  componentDidMount() {
    this.getDataSource();

  }

如果您正在编辑或创建API请求，例如：

fetch(''https://beer.fluentcloud.com/v1/beer'', {
  method: 'PUT',
  body: 'beer'
})

Answer 2

您是否已经尝试绑定此功能？

    this.getDataSource= this.getDataSource.bind(this);

如果要进行CRUD操作，就可以使用fetch API进行发布并从服务器获取数据。

以下是如何将fetch与POST方法一起使用的示例：

var form = new FormData(document.getElementById('login-form'));
fetch("/login", {
  method: "POST",
  body: form
})

希望有帮助。

Answer 3

在App.js中，在onEditSubmit函数中，您需要在函数调用中更正驼峰大小写：this.getDataSource（）而不是this.getdataSource。

希望有帮助！

TypeError：this.getdataSource不是函数

3 个答案: