forEach работает со списком файлов в приложении CRA/Next JS, но не в следующем приложении JS, созданном с помощью create-next-app

#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, я бы не ожидал никакой разницы, но если вы используете готовый компонент или цель перетаскивания, возможно, вы выбрали другую версию этого компонента, которая ведет себя немного по-другому в этом отношении.