someAwesomeFunction= (arg1) => {
let data = JSON.stringify({
"arg1": arg1,
})
// Send a POST request
return axios({
method: 'post',
url: awesomeUrl,
data: data,
headers: {
"Content-Type": "application/json"
}
}).then((response) => {
console.log(response.status) ##вот здесь печатает статус код
return (response.status)
})
.catch((error) => {
console.log(error)
return 500
})}
// вариант 1
handleClick = async () => {
let response = await this.props.someAwesomeFunction(this.props.arg)
console.log(response) ######вот здесь получаю undefined
}
// вариант 2
handleClick = () => {
this.props.someAwesomeFunction(this.props.arg).then(response => {
console.log(response);
});
}
const rootElement = document.getElementById("root");
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route path="expenses" element={<Expenses />} />
<Route path="invoices" element={<Invoices />} />
</Route>
</Routes>
</BrowserRouter>,
rootElement
);
import { Outlet, Link } from "react-router-dom";
export default function App() {
return (
<div>
<h1>Bookkeeper</h1>
<nav
style={{
borderBottom: "solid 1px",
paddingBottom: "1rem"
}}
>
<Link to="/invoices">Invoices</Link> |{" "}
<Link to="/expenses">Expenses</Link>
</nav>
<Outlet />
</div>
);
}
eslint-plugin-react-hooks
не знает, что данная функция не меняет свой референс.{
"rules": {
// ...
"react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "useDispatch|useOtherHookWhichWillDefinitelyNotChange"
}]
}
}
class Rate extends React.Component {
constructor(props) {
super(props);
this.state = {
date: '',
currencyRat: {},
}
this.currency = ['USD', 'RUB', 'CAD'];
}
componentDidMount() {
this.getRate(); // не в конструкторе надо вызывать, а в componentDidMount
}
getRate() {
fetch('https://api.exchangeratesapi.io/latest')
.then(data => {
return data.json(); // забыли вызвать функцию
})
.then(data => {
console.log(data)
this.setState({ date: data.date })
})
}