Как вы с реактом то живёте)
?)
Farik
Dmitriy
Та я вот ребятам выше адресовал). Самый страшный пакет реакт дом)
Sergey
Александр
Cenator 🐈
Aiperi_NK
Добрый день, всем! Подскажите пожалуйста на счет CORS, я внутри fetch указала url, и mode: 'no-cors' чтобы отключить, как в примере указано было, синтаксическая ошибка, все перепробовала, не получается. Заранее благодарю!
Danila
Aiperi_NK
Line 16: Parsing error: The type cast expression is expected to be wrapped with parenthesis
Danila
Line 16: Parsing error: The type cast expression is expected to be wrapped with parenthesis
И что там, на 16 строке?
Aiperi_NK
пробовала и фигурные круглые скобки, не получается
Aiperi_NK
fetch('http://wow.kg/crm/api/?action=list&object=api_articles', {mode: 'no-cors'})
Andrei
хм, у меня все работает
Andrei
выдерни кусок кода, не только сам фетч @Aiperishaa
Aiperi_NK
тестирую другие url, данные выводятся на страницу, а вот когда рабочую ссылку - не отображается на странице ничего, в консоли было написано,что нужно отключить сors
Aiperi_NK
import React, {Component} from 'react';
import Contacts from '../layout/Contacts';
class Cont extends Component {
render() {
return (
<Contacts contacts={this.state.contacts} />
)
}
state = {
contacts: []
};
componentDidMount() {
fetch('http://wow.kg/crm/api/?action=list&object=api_articles', {mode: 'no-cors'})
.then(res => res.json())
.then((data) => {
this.setState({ contacts: data })
})
.catch(console.log);
}
}
export default Cont
Aiperi_NK
import React, {Component} from 'react';
import Contacts from '../layout/Contacts';
class Cont extends Component {
render() {
return (
<Contacts contacts={this.state.contacts} />
)
}
state = {
contacts: []
};
componentDidMount() {
fetch('http://wow.kg/crm/api/?action=list&object=api_articles', mode: 'no-cors')
.then(res => res.json())
.then((data) => {
this.setState({ contacts: data })
})
.catch(console.log);
}
}
export default Cont
Aiperi_NK
2й
Andrei
фетч неправильный) сюда ты скинула правильный fetch('http://wow.kg/crm/api/?action=list&object=api_articles', {mode: 'no-cors'})
а используешь неправильный
fetch('http://wow.kg/crm/api/?action=list&object=api_articles', mode: 'no-cors')
Andrei
{mode: 'no-cors'} @Aiperishaa оберни
Andrei
@alpatovdanila мой комментарий почитай) и все поймешь почему
Aiperi_NK
фетч неправильный) сюда ты скинула правильный fetch('http://wow.kg/crm/api/?action=list&object=api_articles', {mode: 'no-cors'})
а используешь неправильный
fetch('http://wow.kg/crm/api/?action=list&object=api_articles', mode: 'no-cors')
ок, поняла, спасибо большое Андрей! А почему не выводятся данные?
Danila
Тьфу, я почему-то подумал, что речь про импорт в первой строке
Daniil
Откуда у Cont this.state.contacts ?
Daniil
хотя не
Andrei
@Aiperishaa перепиши инициализацию стейта таким образом
const [state,setState] = React.useState({
contacts: []
});
Daniil
лол
Vadim
Anonymous
Кто-нибудь использует уже parcel на проде? Как оно?
Daniil
В песочнице короче кидай
Andrei
в любом случае код должен быть не таким
import React, {Component} from 'react';
import Contacts from '../layout/Contacts';
class Cont extends Component {
constructor(props){
super(props);
this.state = {
contacts: []
};
}
render() {
return (
<Contacts contacts={this.state.contacts} />
)
}
componentDidMount() {
fetch('http://wow.kg/crm/api/?action=list&object=api_articles', {mode: 'no-cors'})
.then(res => res.json())
.then((data) => {
this.setState({ contacts: data })
})
.catch(console.log);
}
}
export default Cont
Andrei
Это уже мы все выяснили. А чего ты редактируешь?)
отправилось сообщение заранее, исправил. Наш троль местный)
Vadim
отправилось сообщение заранее, исправил. Наш троль местный)
Да какой тролль, акстись. Надо просто внимательнее быть и думать перед тем как говорить.
Andrei
@Aiperishaa код, который я скинул- должен быть рабочим) но не обязан :)
Daniil
То шо в конструктор стейт засунул это не изменит кейса
Daniil
Может в порядке методов и то шо стейт внизу написан, а может в ребёнке дело, а может просто в песочницу вылить
Aiperi_NK
@Aiperishaa код, который я скинул- должен быть рабочим) но не обязан :)
Скопировала код, ошибки нету 👏🏻, но не выводит данные🧐
Aiperi_NK
пустая страница
Aiperi_NK
В консоли выдает след. сообщение:
Aiperi_NK
index.js:1375 Warning: Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component
in Route (at App.js:32)
in App (created by ConnectFunction)
in ConnectFunction (at src/index.js:16)
in Provider (at src/index.js:15)
console.<computed> @ index.js:1375
printWarning @ checkPropTypes.js:21
checkPropTypes @ checkPropTypes.js:76
validatePropTypes @ react.development.js:1716
createElementWithValidation @ react.development.js:1809
render @ App.js:31
finishClassComponent @ react-dom.development.js:15319
updateClassComponent @ react-dom.development.js:15274
beginWork @ react-dom.development.js:16262
performUnitOfWork @ react-dom.development.js:20279
workLoop @ react-dom.development.js:20320
renderRoot @ react-dom.development.js:20400
performWorkOnRoot @ react-dom.development.js:21357
performWork @ react-dom.development.js:21267
performSyncWork @ react-dom.development.js:21241
requestWork @ react-dom.development.js:21096
scheduleWork @ react-dom.development.js:20909
scheduleRootUpdate @ react-dom.development.js:21604
updateContainerAtExpirationTime @ react-dom.development.js:21630
updateContainer @ react-dom.development.js:21698
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:22011
(anonymous) @ react-dom.development.js:22163
unbatchedUpdates @ react-dom.development.js:21486
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22159
render @ react-dom.development.js:22234
./src/index.js @ index.js:14
webpack_require @ bootstrap:781
fn @ bootstrap:149
0 @ women.jpg:1
webpack_require @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 3 more frames
backend.js:1 ./src/components/layout/Contacts.js
Line 67: Block is redundant no-lone-blocks
r @ backend.js:1
printWarnings @ webpackHotDevClient.js:120
handleWarnings @ webpackHotDevClient.js:125
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:190
push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:56
(anonymous) @ main.js:282
push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:280
push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:53
WebSocketTransport.ws.onmessage @ websocket.js:36
SyntaxError: Unexpected end of input
at Cont.js:43
Andrei
@Aiperishaa покажи компоненту-ребенка)
Aiperi_NK
import React from 'react'
const Contacts = ({contacts}) => {
return (
<div>
<center><h1>Contact List</h1></center>
{contacts.map((contact) => (
<div class="card">
<div class="card-body">
<h5 class="card-title">{contact.type}</h5>
</div>
</div>
))}
</div>
)
};
export default Contacts
Daniil
Песочница
Andrei
Andrei
@Aiperishaa перепеши свой фетч вот так
fetch("http://wow.kg/crm/api/?action=list&object=api_articles", {
mode: "no-cors"
})
.then(res => res.json())
.then(data => {
this.setState({ contacts: data.api_articles });
})
.catch(console.log);
Aiperi_NK
Ваш код скопировала, не выводится че-та также
Andrei
ошибка есть?
MVD
Andrei
для тех, кому нужна песочница.. что-то не понимаю к чему эта ошибка
https://codesandbox.io/s/little-grass-m9fls
Andrei
ох уж этот codesandbox.io
Mixed Content: The page at 'https://codesandbox.io/' was loaded over HTTPS, but requested an insecure resource 'http://wow.kg/crm/api/?action=list&object=api_articles'. This request has been blocked; the content must be served over HTTPS.
Danila
ох уж этот codesandbox.io
Mixed Content: The page at 'https://codesandbox.io/' was loaded over HTTPS, but requested an insecure resource 'http://wow.kg/crm/api/?action=list&object=api_articles'. This request has been blocked; the content must be served over HTTPS.
Это не сандбокс, это вполне резонная ошибка. Апи просто барахляцкое.
Andrei
Это не сандбокс, это вполне резонная ошибка. Апи просто барахляцкое.
понимаю, не протестишь по-человечески.. может и там такая же ошибка)
Danila
@Aiperishaa
Нужно сделать две вещи: настроить CORS на сервере так, чтобы он работал, он не просто так придуман и подавлять его неправильно. И второе - настроить https на сервере АПИ, без https вообще современные сайты делать даже стыдно, особенно если подразумевается обмен данными.
Farik
Ребят подскажите или может ссылочку скинете, как правильно шаблонизировать (layout), допустим где-то мне нужен sidebar main content, где-то нужен просто content
Andrei
@Aiperishaa
Нужно сделать две вещи: настроить CORS на сервере так, чтобы он работал, он не просто так придуман и подавлять его неправильно. И второе - настроить https на сервере АПИ, без https вообще современные сайты делать даже стыдно, особенно если подразумевается обмен данными.
поддерживаю, проблема явно со стороны сервера. вот твой пример с данными, которые пришли(гипотетически) с сервера.
С сервера невозможно просто получить данные) @Aiperishaa
https://codesandbox.io/s/little-grass-m9fls
Danila
Ребят подскажите или может ссылочку скинете, как правильно шаблонизировать (layout), допустим где-то мне нужен sidebar main content, где-то нужен просто content
<Layout2Columns sidebar={SidebarComponent} content={ContentComponent}/>
Daniil
В ее случае можно и так "https://cors-anywhere.herokuapp.com/http://wow.kg/crm/api/?action=list&object=api_articles"
Andrei
Danila
Daniil
https://repl.it/repls/MajesticAccomplishedCharmap
Anonymous
Подскажите хороший пакет для валидации форм
Vadim
Таймураз
artalar