Invalid value of type object for mapStateToProps argument when connecting component App
store.dispatch({type: 'INCREMENT', payload: 123}) {title: undefined, body: "Body"}
Counter.js:49 {title: undefined, body: "Body"}
Counter.js:49 {title: undefined, body: "Body 2"}
Counter.js:49 {title: undefined, body: "Body"}
webpackHotDevClient.js:138 ./src/App.js
Line 5:18: 'useDispatch' is defined but never used no-unused-vars
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
App.js:15 Add Track
Counter.js:49 {title: 123, body: "Body"}
App.js:22 Remove Track
Counter.js:49 {title: 321, body: "Body 2"}
import React, {Component} from 'react';
import logo from './logo.svg';
import {Counter, store} from './features/counter/Counter';
import './App.css';
import {connect, useDispatch} from "react-redux";
store.dispatch({ type: 'INCREMENT' });
class App extends Component {
addTrack () {
console.log('Add Track');
this.props.changeState(store.dispatch({type: 'INCREMENT', payload: 123}));
};
removeTrack() {
console.log('Remove Track');
this.props.changeState(store.dispatch({type: 'DECREMENT', payload: 321}));
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Counter />
<p onClick={this.addTrack.bind(this)}>
Edit <code>src/App.js</code> and save to reload.
</p>
<span>
<span onClick={this.removeTrack.bind(this)}>Learn {store.getState().title}</span>
<a
className="App-link"
href="https://reactjs.org/"
target="_blank"
rel="noopener noreferrer"
>
React
</a>
<span>, </span>
<a
className="App-link"
href="https://redux.js.org/"
target="_blank"
rel="noopener noreferrer"
>
Redux
</a>
<span>, </span>
<a
className="App-link"
href="https://redux-toolkit.js.org/"
target="_blank"
rel="noopener noreferrer"
>
Redux Toolkit
</a>
,<span> and </span>
<a
className="App-link"
href="https://react-redux.js.org/"
target="_blank"
rel="noopener noreferrer"
>
React Redux
</a>
</span>
</header>
</div>
);
}
}
const changeState = data => data;
const mapDispatchToProps = { changeState };
export default connect(null, mapDispatchToProps)(App);У нас есть приложение на react. Как сделать его доступным для других людей ? Проект надо как то собрать и после положить на сервер ? Если да, то как собирать ?
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;