const resTemps = await axios.post(
'/api/files/datas',
{
fileNames: temps.map((temp) => temp.name),
layer: degree,
domain: { low: zoomDomain[0], high: zoomDomain[1] },
},
{
signal: controllerTempsRef.current.signal,
}
);
const resPressures = await axios.post(
'/api/files/datas',
{
fileNames: pressures.map((pressure) => pressure.name),
layer: degree,
domain: { low: zoomDomain[0], high: zoomDomain[1] },
},
{
signal: controllerPressuresRef.current.signal,
}
);//Перед обновление стейта сохраняешь текущую версию
const oldState = { ...state }
//Обновляешь стейт
setState({ foo: 'bar' });
//Этот код нужно выполнять в юзефект с депсами стейта
//Это массив измененных свойств
const changedProperties = {};
for (const key in state) {
if (state.hasOwnProperty(key) && oldState[key] !== state[key]) {
changedProperties[key] = state[key];
}
}
//Проверяем если были обновления и отправляем
if (Object.keys(changedProperties).length > 0) {
fetch('/endpoint', {
method: 'POST',
body: JSON.stringify(changedProperties),
headers: {
'Content-Type': 'application/json'
}
}).then((response) => {
if (response) {
console.log('Данные успешно обновлены на сервере');
} else {
console.log('Не удалось обновить данные на сервере');
// В случае ошибки апдейтп можно откатить стейт
setState(oldState);
});
}<AnimatePresence key={Math.random()} exitBeforeEnter>>
<motion.div className='card' variants={animation}>
Card
</motion.div>
</AnimatePresence>setInputDinamic(Array.from({length: numOfInputs}, () => ({ value: '', value1: '' })));history, можно использовать свойство length. Если значение length равно 1, то это означает, что в history нет предыдущей страницы, и пользователь зашел по прямому URL.history на пустоту:import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
function goBack() {
if (history.length > 1) {
history.goBack();
} else {
// обработка случая, когда history пуста
// например, переход на главную страницу
history.push('/');
}
}
return (
<div>
<button onClick={goBack}>Назад</button>
</div>
);
}length свойство history, и если оно больше 1, то вызывает goBack(), чтобы вернуться на предыдущую страницу. Если length равно 1, то пользователь зашел по прямому URL, и код выполняет альтернативное действие (в данном случае, переход на главную страницу)
react-scripts не был установлен в вашем проекте или не был установлен правильно.react-scripts с помощью менеджера пакетов npm внутри вашего проекта. Для этого выполните следующие шаги:npm install react-scripts --save-dev. Эта команда установит react-scripts в ваш проект и добавит его в зависимости для разработки (devDependencies) в файле package.json.react-scripts уже был установлен, попробуйте запустить команду npm install для обновления зависимостей вашего проекта.
import React, { useState } from 'react';
const MyComponent = () => {
const [numOfInputs, setNumOfInputs] = useState(0);
const handleNumOfInputsChange = (event) => {
setNumOfInputs(event.target.value);
};
const inputArray = Array.from({ length: numOfInputs }, (_, index) => index + 1);
return (
<div>
<input type="number" value={numOfInputs} onChange={handleNumOfInputsChange} />
{inputArray.map((inputNum) => (
<input key={inputNum} type="text" />
))}
</div>
);
};
export default MyComponent;const handle = (e) => {
e.preventDefault()
//Запрос
}
<Link onClick={handle} to={campaignUrlsPage}>{campaign.id}</Link>discount на каждой итерации? Выводи в консоль и смотри. Затем ты забыл key указать.
setState((prev)=>{
//do something
return [...prev]
}){initialState.map((el, idx) => (
<input
onChange={(e) => showValue(e.target.value, idx)}
key={el.placeholder}
placeholder={el.placeholder}
type={el.type}
/>
))}const showValue = (value, index) => {
setState((prev)=>{
prev[index].value = value
return [...prev]
})
};{currentMovie.length &&
<Pagination
totaMoviess={totalMovies}
MoviesPerPage={MoviesPerPage}
currentPage={currentPage}
paginate={paginate}
/>
}display:none здесь вообще забудь.
export default function HeaderMenuLinks(props) {
return (
<React.Fragment>
{props.menuText.map((menu, key) => (
const subTitle = menu.subtitle || false
<li className='header-menu__link' key={key}>
<p>{menu.title}</p>
{ subTitle &&
<ul className='link-menu'>
{subTitle.map((sm, skey) => (
<li className='link-menu__subtitle' key={skey}>{sm}</li>
))}
</ul>
}
</li>
))}
</React.Fragment>
)
}const isClassName = (type) => {
switch (type) {
case "file":
return "input-file";
case "radio":
return "input-radio";
case "password":
return "input-password";
case "checkbox":
return "input-checkbox";
default:
return 'input-default'
}
};
const cl = []
if (classes) cl.push(classes)
cl.push(isClassName(type))
...
className = {cl.join(' ')}