export default function GetSearchBlock({inputText, buttonText}) {
let query = null;
let allItems = null;
const newPage = (items, page) => {
GetContent.prototype.newPage(items, page, 9)
};
const setData = (elements) => {
return elements.map((el, i) => (
<div className="company-item" key={i}>
<div className="company-item__title">{el.title}</div>
<div className="company-item-status">{el.status}</div>
<div className="company-item-info"><dl><dt>{el.info.name}</dt><dd>{el.info.body}</dd></dl></div>
<address className="company-item__text">{el.address}</address>
<div className="company-item-info"><dl><dt>{el.inn.name}</dt><dd>{el.inn.body}</dd></dl></div>
<div className="company-item-info"><dl><dt>{el.ogrn.name}</dt><dd>{el.ogrn.body}</dd></dl></div>
<div className="company-item-info"><dl><dt>{el.date.name}</dt><dd>{el.date.body}</dd></dl></div>
<div className="company-item-info"><dl><dt>{el.bank.name}</dt><dd>{el.bank.body}</dd></dl></div>
<div className="company-item-info"><dl><dt>{el.job.name}</dt><dd>{el.job.body}</dd></dl></div>
</div>
))
};
const setQuery = async() => {
query = {
body: document.querySelector('.searchBlock input').value,
type: document.querySelector('.searchBlock select').value
};
document.querySelector('.searchContent .preloader').style.display = 'flex';
document.querySelector('.searchContent .preloader .yellow').style.animation = 'preloader 2s infinite';
document.querySelector('.searchContent .preloader .red').style.animation = 'preloader 5s infinite';
document.querySelector('.searchContent .preloader .blue').style.animation = 'preloader 3s infinite';
GetSearchBlock.prototype.data = setData(await getData());
console.log(GetSearchBlock.prototype.data);
document.querySelector('.searchContent .preloader').style.display = 'none';
// await newPage(allItems,2);
};
const getData = async() => {
let res = await fetch('http://localhost:4000/scrap', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
query: query.body,
type: query.type
})
});
res = await res.json();
return res.body
};
return (
<div className={'searchBlock'}>
<input type='search' placeholder={inputText}/>
<select>
<option value="ul">Юр. Лица</option>
<option value="ip">ИП</option>
</select>
<button onClick={setQuery}>{buttonText}</button>
</div>
)
}
GetSearchBlock.prototype.data = null;
searchContent.js:9 POST localhost:3000/scrap 405 (Method Not Allowed)
getData @ searchContent.js:9
(anonymous) @ searchContent.js:29
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
(anonymous) @ react-dom.development.js:25240
workLoop @ scheduler.development.js:641
flushWork @ scheduler.development.js:596
performWorkUntilDeadline @ scheduler.development.js:203
searchContent.js:20 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at getData (searchContent.js:20)
export default function GetContent() {
const [data, setData] = useState();
const getData = async() => {
const res = await fetch('/scrap', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
query: 'Ромашка',
type: 'ul'
})
});
const Data = await res.json();
console.log(Data);
setData(Data);
};
useEffect(() => {
getData().then(r => console.log(r));
}, []);
return (
<div>
{data}
</div>
)
}