Question

我的应用程序中有一个提供报价的功能。我的前端在react js上，后端在Laravel上。我已经创建了一条更新数据的路径，并使用Axios对其进行了调用，但是我不知道自己在做什么错。任何类型的帮助将不胜感激，谢谢！

这是我在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>
    )
  }

}```

Answer 1

错误404可能意味着链接中指定的报价不存在，因此无法更新。检查您是否有一个要在数据库中搜索的ID的订单。但是，发布您的整个回复可能会向我们显示更多信息。简单的404很模糊，您可能需要复制粘贴。

话虽如此，我建议对此类路由使用Eloquent。您基本上可以将路线更改为/offers/{offer}，然后不用输入$ id作为该函数的变量，而是通过id查找要约，只需查询$offer->update(your_data)，它就可以正常工作。完全一样，只是保持它整洁并消除任何基本错误

无法在Reactjs + Laravel App中更新数据

1 个答案: