Не удается обновить данные в приложении Reactjs + Laravel - PullRequest
0 голосов
/ 07 апреля 2020

У меня есть функция добавления предложений в моем приложении. мой внешний интерфейс включен js, а внутренний - Laravel. Я создал маршрут для обновления данных и назвал его, используя Ax ios, но я не знаю, что я делаю неправильно. Любая помощь будет оценена Спасибо!

это мой маршрут в API. php

Route::put('offers/{id}', 'Api\Offer\OfferController@update');

Это мой OfferController

public function update(Request $request, $id)
{
    $offer = Offer::findOrFail($id);
    $offer->update($request->all());
    return $offer;
}

Это моя функция вызова API для обновления

export const updateItem = (offertitle,offerdescription,vid,id) => {
return axios
    .put(
        `/api/offers/${id}`,
        {   
            offertitle:offertitle,
            offerdescription:offerdescription,
            vid:vid
        },
        {
            headers: { 'Content-Type': 'application/json' }
        }
    )
    .then(function (response) {
        console.log(response)
    })

}

OfferComponent

export default class Offer extends React.Component{
  constructor() {
    super()
    this.state = {
      offertitle: '',
      offerdescription: '',
      editDisabled: false,
      offers: [],
      redirect: false,
      vid:'',
      offerid:''

    }

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

  componentDidMount() {
    this.getAll()
    if (sessionStorage.getItem('user')) {
      vendorprofile().then(res => {
        this.setState({
          vid: res.user.vid
        })
      })

    }
    else {
      this.setState({ redirect: true });
    }
  }

  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  getAll = () => {
    getList().then(data => {
      this.setState(
        {

          offertitle:'',
          offerdescription:'',
          offers: [...data]
        },
        () => {
          console.log(this.state.offers)
        }
      )
    })
  }

  onSubmit = e => {
    e.preventDefault()

    addItem({offertitle: this.state.offertitle, offerdescription: this.state.offerdescription,vid: this.state.vid}).then(() => {
      this.getAll()
    })
    this.setState({
      offertitle: '',
      offerdescription:'',
      vid:''
    })
  }

  onUpdate = e => {
    e.preventDefault()
    updateItem({ offertitle: this.state.offertitle, offerdescription: this.state.offerdescription, offerid: this.state.offerid, vid: this.state.vid }).then(() => {
      this.getAll()
    })
    this.setState({
      offertitle: '',
      offerdescription: '',
      vid:'',
      editDisabled: ''

    })
    this.getAll()
  }

  onEdit = (offerid, e) => {
    e.preventDefault()

    var data = [...this.state.offers]
    data.forEach((offers,index) => {
      if (offers.offerid === offerid) {
        this.setState({
          offerid: offers.offerid,
          offertitle: offers.offertitle,
          offerdescription: offers.offerdescription,
          editDisabled: true
        })
      }
    })
  }

  onDelete = (val, e) => {
    e.preventDefault()
    deleteItem(val)

    var data = [...this.state.offers]
    data.filter(function (offers, index) {
      if (offers.offerid === val) {
        data.splice(index, 1)
      }
      return true
    })
    this.setState({ offers: [...data] })
  }

 render() {
    if (this.state.redirect) {
      return (
        <Redirect to="/stsignin" />
      )
    }
    return (
      <div>
        <Pane />
        <div className="container" style={{ marginTop : 150}}>
        <form>
          <div className="form-group">
            <div className="row">
              <div className="col-md-12">
                <label>OFFER TITLE</label>
                <input
                  type="text"
                  className="form-control"
                  id="offertitle"
                  name="offertitle"
                  value={this.state.offertitle || ''}
                  onChange={this.onChange.bind(this)}
                />

                  <label>OFFER DESCRIPTION</label>
                  <input
                    type="text"
                    className="form-control"
                    id="offerdescription"
                    name="offerdescription"
                    value={this.state.offerdescription || ''}
                    onChange={this.onChange.bind(this)}
                  />

              </div>
            </div>
          </div>
          {!this.state.editDisabled ? (
            <button
              type="submit"
              onClick={this.onSubmit.bind(this)}
              className="btn btn-success btn-block"
            >
              Submit
                        </button>
          ) : (
              ''
            )}
          {this.state.editDisabled ? (
            <button
              type="submit"
              onClick={this.onUpdate.bind(this)}
              className="btn btn-primary btn-block"
            >
              Update
                        </button>
          ) : (
              ''
            )}
        </form>
        <table className="table">
          <tbody>
              <tr>
                <th>OFFER_TITLE</th>
                <th>OFFER_DESCRIPTION</th>
              </tr>
            {this.state.offers.map((offers,index) => (

              <tr key={index}>
                <td className="text-left">{offers.offertitle}</td>
                <td className="text-left">{offers.offerdescription}</td>
                <td className="text-right">
                  <button
                    href=""
                    className="btn btn-info mr-1"
                    disabled={this.state.editDisabled}
                    onClick={this.onEdit.bind(
                      this,
                      offers.offerid
                    )}
                  >
                    Edit
                                    </button>
                  <button
                    href=""
                    className="btn btn-danger"
                    disabled={this.state.editDisabled}
                    onClick={this.onDelete.bind(
                      this,
                      offers.offerid
                    )}
                  >
                    Delete
                                    </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      </div>
    )
  }

}```




1 Ответ

0 голосов
/ 08 апреля 2020

Ошибка 404. Может означать, что предложение, указанное в ссылке, не существует и поэтому не может быть обновлено. Проверьте, есть ли у вас заказ с идентификатором, который вы ищете в базе данных. Тем не менее, размещение вашего полного ответа может показать нам больше информации. Простой 404 довольно расплывчатый, вы можете скопировать вставить его.

При этом я рекомендую использовать Eloquent для таких маршрутов. Вы можете просто изменить свой маршрут на /offers/{offer}, а затем вместо того, чтобы вводить $ id в качестве переменной для этой функции, а затем найти предложение по идентификатору, вы можете просто запросить $offer->update(your_data), и он будет работать, как и ожидалось. Это в точности то же самое, но просто держит его в чистоте и устраняет все ошибки c

...