انجام ندادن عملیلات crud در برنامه laravel react

- 4 ماه پیش
توسط مهدی آپدیت شد
Arshavir ( 11326 تجربه )
5 ماه پیش

من یه برنامه دارم
فرانت با react
بک با laravel
داده ها رو نشون میده اما حذف یا ویرایش یا اضافه نمی کنه
این خطای هست که توی کنسول بود

app.js:6335 Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in  React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
printWarning @ app.js:6335
app.js:6335 Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class
printWarning @ app.js:6335
app.js:166 Warning: Unknown DOM property class. Did you mean className?
    in i (created by Master)
    in a (created by Master)
    in div (created by Master)
    in div (created by Master)
    in nav (created by Master)
    in div (created by Master)
    in Master (created by RouterContext)
    in RouterContext (created by Router)
    in Router
printWarning @ app.js:166
[Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0ITw.woff2
:8000/display-item:1 Failed to load resource: the server responded with a status of 404 (Not Found)
localhost:8000/items:1 Failed to load resource: the server responded with a status of 419 (unknown status)
app.js:9035 Uncaught (in promise) Error: Request failed with status code 419
    at createError (app.js:9035)
    at settle (app.js:43670)
    at XMLHttpRequest.handleLoad (app.js:8909)
createError @ app.js:9035
settle @ app.js:43670
handleLoad @ app.js:8909
localhost:8000/items:1 Failed to load resource: the server responded with a status of 419 (unknown status)
app.js:9035 Uncaught (in promise) Error: Request failed with status code 419
    at createError (app.js:9035)
    at settle (app.js:43670)
    at XMLHttpRequest.handleLoad (app.js:8909)
createError @ app.js:9035
settle @ app.js:43670
handleLoad @ app.js:8909
مهدی ( 18667 تجربه )
5 ماه پیش

داره میگه react props رو باید جدا نصب کنی دیگه با ریکت ارائه نمیشه و همین طور create-react-class
اینم ارور 419
https://goo.gl/GeauJx

Arshavir ( 11326 تجربه )
5 ماه پیش
مهدی ( 18667 تجربه )
5 ماه پیش

@sj10ss
واسه props از:
https://goo.gl/pjCZqk
واسه create class از:
https://goo.gl/U9RT9h

Arshavir ( 11326 تجربه )
5 ماه پیش

@mdaalvand

این پیغام رو توی console مرورگر میده
البته من فقط نصب کردم
باید چیزی رو اضافه کنم با فایل app.js؟؟/

Warning: Unknown DOM property class. Did you mean className?
    in i (created by Master)
    in a (created by Master)
    in div (created by Master)
    in div (created by Master)
    in nav (created by Master)
    in div (created by Master)
    in Master (created by RouterContext)
    in RouterContext (created by Router)
    in Router

POST http://localhost:8000/items 419 (unknown status)

Uncaught (in promise) Error: Request failed with status code 419
    at createError (app.js:9035)
    at settle (app.js:43640)
    at XMLHttpRequest.handleLoad (app.js:8909)
مهدی ( 18667 تجربه )
5 ماه پیش

@sj10ss
خب توی تگ های jsx به جای کلمه class از className استفاده کن
واسه رفع ارور ۴۱۹ از لینک زیر استفاده کردی؟
https://goo.gl/GeauJx

Arshavir ( 11326 تجربه )
5 ماه پیش

@mdaalvand
اینو باید کجا استفاده کنم
توی تگ های jsx به جای کلمه class از className استفاده کن

مهدی ( 18667 تجربه )
5 ماه پیش

@sj10ss
شما یه وارنینگ دارین و یه ارور که توی وارنینگت میگه به جای class از className استفاده کن مثل زیر:

<input className="foo"/>
Arshavir ( 11326 تجربه )
5 ماه پیش

@mdaalvand
بازم خطا میده با اینکه classname هست
اینم یه نمونه کد که classname هست

        <form onSubmit={this.handleSubmit}>
            <div className="form-group">
                <label>Item Name</label>
                <input type="text"
                  className="form-control"
                  value={this.state.name}
                  onChange={this.handleChange1} />
            </div>

            <div className="form-group">
                <label name="product_price">Item Price</label>
                <input type="text" className="form-control"
                  value={this.state.price}
                  onChange={this.handleChange2} />
            </div>

            <div className="form-group">
                <button className="btn btn-primary">Update</button>
            </div>
        </form>
Arshavir ( 11326 تجربه )
5 ماه پیش

@mdaalvand
اینم لیست خطا ها

Uncaught TypeError: Cannot read property 'value' of undefined
    at CreateItem.handleChange1 (app.js:67211)
    at Input.handleChange (app.js:71828)
    at Object.executeOnChange (app.js:11511)
    at ReactDOMComponent._handleChange (app.js:59104)
    at Object.ReactErrorUtils.invokeGuardedCallback (app.js:10921)
    at executeDispatch (app.js:10706)
    at Object.executeDispatchesInOrder (app.js:10729)
    at executeDispatchesAndRelease (app.js:6891)
    at executeDispatchesAndReleaseTopLevel (app.js:6902)
    at Array.forEach (<anonymous>)
6app.js:67218 Uncaught TypeError: Cannot read property 'value' of undefined
    at CreateItem.handleChange2 (app.js:67218)
    at Input.handleChange (app.js:71828)
    at Object.executeOnChange (app.js:11511)
    at ReactDOMComponent._handleChange (app.js:59104)
    at Object.ReactErrorUtils.invokeGuardedCallback (app.js:10921)
    at executeDispatch (app.js:10706)
    at Object.executeDispatchesInOrder (app.js:10729)
    at executeDispatchesAndRelease (app.js:6891)
    at executeDispatchesAndReleaseTopLevel (app.js:6902)
    at Array.forEach (<anonymous>)
localhost:8000/items:1 Failed to load resource: the server responded with a status of 419 (unknown status)
app.js:14080 Uncaught (in promise) Error: Request failed with status code 419
    at createError (app.js:14080)
    at settle (app.js:51176)
    at XMLHttpRequest.handleLoad (app.js:13954)
add-item:1 Failed to load resource: the server responded with a status of 404 (Not Found)
مهدی ( 18667 تجربه )
5 ماه پیش

کد این توابع handleChange و handleChange2 و... رو اینجا بذار

Arshavir ( 11326 تجربه )
5 ماه پیش

@mdaalvand

نمونه کد قسمت ایجاد ایتم

import React, {Component} from 'react';
import { Input } from 'element-react';
import {browserHistory} from 'react-router';

class CreateItem extends Component {
  constructor(props){
    super(props);
    this.state = {productName: '', productPrice: ''};

    this.handleChange1 = this.handleChange1.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange1(e){
    this.setState({
      productName: e.target.value
    })
  }
  handleChange2(e){
    this.setState({
      productPrice: e.target.value
    })
  }
  handleSubmit(e){
    e.preventDefault();
    const products = {
      name: this.state.productName,
      price: this.state.productPrice
    }
    let uri = 'http://localhost:8000/items';
    axios.post(uri, products).then((response) => {
      browserHistory.push('/display-item');
    });
  }

    render() {
      return (
      <div>
        <h1>Create An Item</h1>
        <form onSubmit={this.handleSubmit}>
          <div className="row">
            <div className="col-md-6">
              <div className="form-group">
                <Input placeholder="Please input" prepend="Item Name:" onChange={this.handleChange1} />
              </div>
            </div>
            </div>
            <div className="row">
              <div className="col-md-6">
                <div className="form-group">
                  <Input placeholder="Please input" prepend="Item Price:" onChange={this.handleChange2} />
                </div>
              </div>
            </div><br />
            <div className="form-group">
              <button className="btn btn-primary">Add Item</button>
            </div>
        </form>
  </div>
      )
    }
}
export default CreateItem;
مهدی ( 18667 تجربه )
5 ماه پیش

@sj10ss
این اینپوت که شما گذاشتی کاستومه و لازم نیست بنویسی e.target.value فقط بنویس e همون رو برمیگردونه

Arshavir ( 11326 تجربه )
5 ماه پیش

@mdaalvand

این error رو میده

Failed to load resource: the server responded with a status of 419 (unknown status)
app.js:14080 Uncaught (in promise) Error: Request failed with status code 419
    at createError (app.js:14080)
    at settle (app.js:51176)
    at XMLHttpRequest.handleLoad (app.js:13954)
add-item:1 Failed to load resource: the server responded with a status of 404 (Not Found)

اینم warning

app.js:10591 Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in  React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
printWarning @ app.js:10591
app.js:10591 Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class
مهدی ( 18667 تجربه )
5 ماه پیش

از این لینک نتونستی استفاده کنی؟ واسه ارور ۴۱۹
https://goo.gl/GeauJx

Arshavir ( 11326 تجربه )
5 ماه پیش

@mdaalvand

این قسمت کدی که توی لینک زیر بود
توی قسمت app.js موجود هست

      $.ajax({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
مهدی ( 18667 تجربه )
5 ماه پیش

@sj10ss
توی view اصلیت متا تگ زیر رو اضافه کن

<meta name="csrf-token" content="{{ csrf_token() }}">

حالا توی جاوا اسکریبت این متغییر رو تعریف کن

let token = document.head.querySelector('meta[name="csrf-token"]').content;

و واسه قسمت ajax از کد زیر استفاده کن

$.ajax({
  url: uri,
  type: "POST",
  headers : { 'X-CSRF-TOKEN': token }
});

یا

$.ajax({
  url: uri,
  type: "POST",
  data: { "_token": token }
});

اگرم از axios استفاده میکنی کافیه یه هدر عمومی به نام X-CSRF-TOKEN تعریف کنی

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
Arshavir ( 11326 تجربه )
5 ماه پیش

@mdaalvand
بله از axios استفاده می کنم
توی فایل bootstrap.js به صورت زیر تعریف کردم
اما باز همون خطا رو میده


window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap-sass');
} catch (e) {}

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
مهدی ( 18667 تجربه )
5 ماه پیش

اگه متاتگ رو بشناسه نباید ایرادی بگیره تست کردم مشکلی نداشت شاید فایل بوت استرپ require نشده و...
زمانی که صفحه مورد نظر لود میشه تست کن ببین عبارت زیر رو توی کنسول کروم مینویسی مقداری چیزی برمیگردونه:

document.head.querySelector('meta[name="csrf-token"]').content
Arshavir ( 11326 تجربه )
5 ماه پیش

@mdaalvand
وارد کردم خروجی برمیگردونه از دستور زیر

document.head.querySelector('meta[name="csrf-token"]').content

ولی بازم همون خطا

مهدی ( 18667 تجربه )
5 ماه پیش

والا این کد منه آپلود کردم هم با جیکوئری هم با axios دیگه نمیدونم اگه خواستی کل کدتو بذار دیگه نمیدونم والا
https://goo.gl/778xEv

برای ارسال پاسخ باید وارد سایت شوید