Почему метод карты возвращает .map не является функцией?
Массив
const props: NavButtonProps[] = [
{
text: "Home",
url: "teste"
},
{
text: "Services",
url: "teste"
},
{
text: "projects",
url: "teste"
}
]
где используется карта метода
const NavButtonWrapper = (buttons: NavButtonProps[]): ReactElement => {
return (
<div className = "flex space-x-16">
{ buttons.map((button) => { return (<NavButton {...button}/>)})}
</div>
)
}
Я уже видел несколько случаев, когда это работает, но я не знаю, почему в моем коде он возвращает кнопки. Карта не является функцией.
Компоненты всегда получают один параметр (props), который всегда является объектом. Вы пытаетесь использовать buttons напрямую, а не обращаться к нему через реквизиты.
—
09.08.2024 23:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов
Проще говоря, компонент - это фабрика для создания элементов.
1
2
59
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Это просто синтаксическая ошибка, вы можете попробовать удалить () после оператора return, Найдите приведенный ниже код
{buttons.map((кнопка) => {
return <NavButton {...button} />;
})}
Спасибо, надеюсь, это поможет.
Синтаксическая ошибка приводит к тому, что .map не функция?
—
09.08.2024 23:01
Ответ принят как подходящий
попробуйте так:
import React from 'react';
interface NavButtonProps {
text: string;
url: string;
}
const App: React.FC = () => {
const buttons: NavButtonProps[] = [
{
text: 'Home',
url: 'test',
},
{
text: 'Services',
url: 'test',
},
{
text: 'Projects',
url: 'test',
},
];
// This is only for testing, you can replace it with your own component
const NavButton: React.FC<NavButtonProps> = ({ text, url }) => {
return (
<li className = "nav-button">
<a href = {url}>{text}</a>
</li>
);
};
const NavButtonWrapper: React.FC = () => {
return (
<div className = "flex space-x-16">
{buttons.map((button, index) => (
<NavButton key = {index} {...button} />
))}
</div>
);
};
return (
<div>
<NavButtonWrapper />
</div>
);
};
export default App;
Деструктурируйте реквизит, чтобы получить доступ к реквизиту кнопок.
const NavButtonWrapper = ({ buttons } : { buttons: NavButtonProps[] }) => (
<div className = "flex space-x-16">
{buttons.map(button => <NavButton {...button}/>)}
</div>
);
Другие вопросы по теме
Невозможно правильно высмеять модуль машинописного текста в шутку
Требуется логическое свойство
Почему TypeScript не принимает число 16?
Лучший способ проверить наличие неложных значений в JS/TS?
TS не может определить соответствующий тип параметра
Несогласованность данных
Как автоматически выводить типы в функциональном конвейере TypeScript с использованием функций преобразователя высшего порядка?
Почему useState не работает в этом сценарии
Как правильно набрать возвращаемое значение функции с динамическими ключами?
Pick<Type, Keys>, где Type — Partial<Type> позволяет назначать несуществующие свойства
Похожие вопросы
Требуется логическое свойство
ReferenceError: свойство TextEncoder не существует
Требуется Babel "^7.16.0", но был загружен "7.12.3"
В чем разница между деструктуризацией и просто использованием свойств в React
Несогласованность данных
Прокрутите вверх, если изменение маршрута не работает
Почему useState не работает в этом сценарии
UseState получает только последнее значение
Как правильно создать компонент React по имени
Как передать ответ LLM из FastAPI в React?
Вероятно, вам нужно объявить
interface NavButtonWrapperProps { buttons: NavButtonProps[]; }, а затем использовать его в своем компоненте-оболочке.