من یه برنامه دارم
فرانت با 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
داره میگه react props رو باید جدا نصب کنی دیگه با ریکت ارائه نمیشه و همین طور create-react-class
اینم ارور 419
https://goo.gl/GeauJx
@mdaalvand
این دو رو باید فقط نصب کنم؟
https://www.npmjs.com/package/create-react-class
https://www.npmjs.com/package/react-prop-types
این پیغام رو توی 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)
@sj10ss
خب توی تگ های jsx به جای کلمه class از className استفاده کن
واسه رفع ارور ۴۱۹ از لینک زیر استفاده کردی؟
https://goo.gl/GeauJx
@mdaalvand
اینو باید کجا استفاده کنم
توی تگ های jsx به جای کلمه class از className استفاده کن
@sj10ss
شما یه وارنینگ دارین و یه ارور که توی وارنینگت میگه به جای class از className استفاده کن مثل زیر:
<input className="foo"/>
@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>
@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)
نمونه کد قسمت ایجاد ایتم
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;
@sj10ss
این اینپوت که شما گذاشتی کاستومه و لازم نیست بنویسی e.target.value فقط بنویس e همون رو برمیگردونه
این 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
این قسمت کدی که توی لینک زیر بود
توی قسمت app.js موجود هست
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
@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;
@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');
}
اگه متاتگ رو بشناسه نباید ایرادی بگیره تست کردم مشکلی نداشت شاید فایل بوت استرپ require نشده و...
زمانی که صفحه مورد نظر لود میشه تست کن ببین عبارت زیر رو توی کنسول کروم مینویسی مقداری چیزی برمیگردونه:
document.head.querySelector('meta[name="csrf-token"]').content
@mdaalvand
وارد کردم خروجی برمیگردونه از دستور زیر
document.head.querySelector('meta[name="csrf-token"]').content
ولی بازم همون خطا
والا این کد منه آپلود کردم هم با جیکوئری هم با axios دیگه نمیدونم اگه خواستی کل کدتو بذار دیگه نمیدونم والا
https://goo.gl/778xEv
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟