#reactjs #foreach #next.js #create-react-app
Вопрос:
Я просто в замешательстве. Когда я использовал forEach в списке файлов на своем веб-сайте, созданном с помощью CRA и перенесенном в следующий JS (точно такой же файл), forEach работает. Но затем, когда я заново создал свой веб-сайт с помощью create-next-app, теперь я не могу использовать forEach в списке файлов. И я только что протестировал оба своих файла, я запустил свой веб-сайт CRA/Nextjs, и forEach все еще работает в списке файлов, но на моем веб-сайте создания следующего приложения появляется ошибка в forEach.
Это образец моего кода:
const selectImageHandle = (e) => {
let arrayImages = [];
e.target.files.forEach(file => {
arrayImages.push(file);
})
}
Я не заметил этого сначала, когда заново создавал свой веб-сайт с помощью create-next-app, потому что он уже работает на моем CRA/Next Js. Спасибо!
Изменить: ошибка, которую я получаю при создании следующего приложения, заключается в следующем
e.target.files.forEach is not a function
Комментарии:
1. В чем ошибка?
2. @rayhatfield ошибка, которую я получаю при использовании forEach в списке файлов в моем приложении «создать следующее», заключается в следующем
e.target.files.forEach is not a function
3. Сработает ли это, если вы сделаете
const arrayImages = […e.target.files]
это вместо этого?4. @rayhatfield да, это так, хотя я все еще в замешательстве, почему forEach работает на CRA, но не на Next js. Я думаю, что воспользуюсь этим, спасибо.
Ответ №1:
Является ли ввод вашего файла обычным вводом html или это компонент из библиотеки?
Похоже, что ранее вы получали событие, в котором e.target.files
был массив, а теперь вы получаете событие, в котором это фактический список файлов, у которого нет forEach
метода.
Однако список файлов можно повторять, поэтому, как упоминалось в моем комментарии выше, вы могли бы сделать это вместо этого (что имеет дополнительное преимущество краткости).:
const arrayImages = […e.target.files];
Без дополнительной информации я не уверен, почему это будет отличаться от create-react-app
vs create-next-app
. Если вы используете стандартный ввод html, я бы не ожидал никакой разницы, но если вы используете готовый компонент или цель перетаскивания, возможно, вы выбрали другую версию этого компонента, которая ведет себя немного по-другому в этом отношении.
Комментарии:
1. я просто использую стандартный ввод html. Я также получал список файлов в cra, то же самое в create-next-app.