Обновление состояния создает бесконечный цикл
Почему присвоение setTimeSlotsList(fetchAPI(day)) создает бесконечный цикл?
Кажется, что поток кода работает, когда я просто console.info(fetchAPI(day)) тестирую.
const [timeSlotsList, setTimeSlotsList] = useState([])
function FormValues () {
const { values } = useFormikContext();
const day = new Date(values.date)
useEffect(() => {
setTimeSlotsList(fetchAPI(day))
}, [values.date]);
}
const AvailableTimes = (props) => {
const timeSlots = props.data.map(time =>
<option value = {time}>{time}</option>
)
return (
<>{timeSlots}</>
)
}
function updateTime (valueTime) {
return (
setTimeSlotsList(
timeSlotsList.filter(a => a !== valueTime)
)
)
}
Функция fetchAPI показана ниже:
const seededRandom = function (seed) {
var m = 2**35 - 31;
var a = 185852;
var s = seed % m;
return function () {
return (s = s * a % m) / m;
};
}
const fetchAPI = function(date) {
let result = [];
let random = seededRandom(date.getDate());
for (let i = 17; i <= 23; i++) {
if (random() < 0.5) {
result.push(i + ':00');
}
if (random() < 0.5) {
result.push(i + ':30');
}
}
return result;
};
Не могли бы вы сложить все части головоломки сразу? Я не совсем понимаю, почему вы добавляете их по частям. Где код setTimeSlotsList, а также контекст?
это ссылочный тип данных. «values.date» — это значение, полученное из входных данных с типом = «дата».
@Armen Я отредактировал код выше, чтобы показать полную картину.
Спасибо. Вы используете useState вне компонента или это опечатка?
@Armen const [timeSlotsList, setTimeSlotsList] = useState ([]) объявляется внутри основного компонента. вне внутренних функций, таких как fetchAPI....
Кажется, вы предоставили не весь код. Пожалуйста, предоставьте полную часть, чтобы я мог скопировать и запустить ее. Без полного кода я не смогу дать правильный ответ.
@Армен, я пробовал, но это не позволяет мне вставить сюда весь код. там написано, что это слишком долго.
Возможно, вы могли бы использовать кодовый блок или другой инструмент, чтобы более эффективно делиться им.
Редко нам нужен этот код для ответа на вопрос. Хороший способ найти проблему — создать копию (вилку или ветку) вашего проекта. Затем удалите все навороты, которые не имеют отношения к вопросу. Посмотрите, сможете ли вы найти минимальный объем кода, необходимый для создания проблемы. Во многих случаях вы решите свою собственную проблему, сделав это. Если вы все еще не знаете, в чем проблема после сокращения кода, минимальный объем кода должен поместиться в вопрос о переполнении стека. См.: stackoverflow.com/help/minimal-reproducible-example
Пожалуйста, отредактируйте , включив в него полный и понятный минимальный воспроизводимый пример, чтобы читатели могли видеть и понимать, что вы делаете и когда это делают. Если есть ошибки, пожалуйста, включите полное сообщение об ошибке и все сопутствующие трассировки стека, а также любые конкретные шаги воспроизведения для создания проблемы, если они необходимы для понимания проблемы.
Мне удалось решить эту проблему, создав еще один вызов useEffect вне функции FormValues, который вызывает повторную визуализацию, приводящую к бесконечному циклу.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Хук useEffect в React предназначен для запуска функции обратного вызова при изменении одной из зависимостей в массиве зависимостей. Здесь values.date — это зависимость. Поэтому каждый раз, когда это меняется, запускается useEffect. Эффект запускается при изменении значения value.date, что срабатывает setTimeSlotsList(fetchAPI(day)).
Если fetchAPI(day) каким-то образом вызывает изменение в Values.date, запускается новый рендеринг, и useEffect запускается снова, потому что Values.date — это новый объект/ссылка. Это создает цикл, посколькуvalues.date изменяется при каждом рендеринге.
насколько я вижу, функция fetchAPI, похоже, не вызывает никаких изменений в зависимости перехватчика useEffect. Я обновил приведенные выше вопросы, чтобы показать функцию fetchAPI.
Мне удалось решить эту проблему, создав еще один вызов useEffect вне функции FormValues, который вызывает повторную визуализацию, приводящую к бесконечному циклу.
useEffect(() => {
const day = new Date(dateSelected)
setTimeSlotsList(fetchAPI(day))
}, [dateSelected]);
const FormValues = () => {
const { values } = useFormikContext();
useEffect(() => {
setDateSelected(values.date)
}, [values.date]);
}
Я использую Formik для создания этой формы, что немного усложняет ее.
Что такое значения.дата? Это примитивный тип или ссылочный тип?