Вопросы по тегу: material-ui

(8)

Использование async/await внутри функционального компонента React

Я только начинаю использовать React для проекта, и мне очень сложно включить асинхронную/ожидающую функциональность в один из моих компонентов.У меня есть асинхронная функция с именем fetchKey, которая получает ключ доступа от API, который я обслуживаю через AWS API Gateway:const fetchKey = async authProps => { try { const headers = { Authorization: authProps.idToken // using Cognito authorizer }; const response = await axios.post( "https://MY_ENDPOINT.execute-api.us-east-1.amazonaws.com/v1/", API_GATEWAY_POST_PAYLOAD_TEMPLATE, { headers: headers } ); return response.data.access_token; } catch (e) { console.log(`Axios request failed! : ${e}`); return e; } }; Я использую тему пользовательского интерфейса React Material и отказываюсь использовать один из его шаблонов Dashboard. К сожалению, в шаблоне Dashboard используется функциональный компонент без сохранения состояния:const Dashboard = props => { const classes = useStyles(); const token = fetchKey(props.auth); console.log(token); return ( ... rest of the functional component's code Результатом моего console.log(токена) является обещание, которое ожидается, но скриншот в моем браузере Google Chrome несколько противоречив - он находится в ожидании или решен? Во-вторых, если я попробую вместо token.then((данные, ошибка)=> console.log(данные, ошибка)), я получу undefined для обеих переменных. Мне кажется, это указывает на то, что функция еще не завершена и, следовательно, не разрешила никаких значений для data или error. Тем не менее, если я попытаюсь поставить const Dashboard = async props => { const classes = useStyles(); const token = await fetchKey(props.auth); React сильно жалуется:> react-dom.development.js:57 Uncaught Invariant Violation: Objects are > not valid as a React child (found: [object Promise]). If you meant to > render a collection of children, use an array instead. > in Dashboard (at App.js:89) > in Route (at App.js:86) > in Switch (at App.js:80) > in div (at App.js:78) > in Router (created by BrowserRouter) > in BrowserRouter (at App.js:77) > in div (at App.js:76) > in ThemeProvider (at App.js:75) Теперь я буду первым, кто заявит, что у меня недостаточно опыта, чтобы понять, что происходит с этим сообщением об ошибке. Если бы это был традиционный компонент класса React, я бы использовал метод this.setState для установки какого-то состояния, а затем пошел бы своим веселым путем. Однако у меня нет такой опции в этом функциональном компоненте.Как включить асинхронную/ожидающую логику в мой функциональный компонент React?Изменить: Так что я просто скажу, что я идиот. Фактически возвращаемый объект ответа не response.data.access_token. Это было response.data.Item.access_token. Дох! Вот почему результат возвращался как неопределенный, хотя фактическое обещание было разрешено.
Y

Yu Chen

2 года назад

Ответов: 4

Реакция Material-ui, как я узнаю, что могу использовать кнопку onClick for?

Список свойств в документе не включает onClick (http://www.material-ui.com/#/компоненты/иконка-кнопка)Как узнать, что мне нужно использовать onClick для обработчика кликов?
e

eugene

5 лет назад

Ответов: 5

Неверный вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента.

Я хочу показать несколько записей в таблице с помощью React, но получаю такую ​​ошибку: Неверный вызов трубки. Крючки можно вызывать только внутри корпуса функциональная составляющая. Это могло произойти по одному из следующих причины: Возможно, у вас несовпадающие версии React и средства визуализации (например, React DOM) Возможно, вы нарушаете правила хуков У вас может быть несколько копий React в одном приложении. См. Советы по отладке и исправьте эту проблему. импорт React, { Компонент } от 'реагировать'; Импортировать { makeStyles } из '@ material-ui / core / styles'; импортировать таблицу из '@ material-ui / core / Table'; импортировать TableBody из '@ material-ui / core / TableBody'; импортировать TableCell из '@ material-ui / core / TableCell'; импортировать TableHead из '@ material-ui / core / TableHead'; импортировать TableRow из '@ material-ui / core / TableRow'; импортировать бумагу из '@ material-ui / core / Paper'; const useStyles = makeStyles (theme => ({ корень: { ширина: '100%', marginTop: theme.spacing (3), overflowX: 'авто', }, Таблица: { minWidth: 650, }, })); надбавка за класс расширяет Компонент { constructor () { супер(); this.state = { надбавки: [], }; } componentWillMount () { fetch ('http://127.0.0.1: 8000 / надбавки') .then (data => { вернуть данные.json (); }). then (data => { this.setState ({ пособия: данные }); console.log («состояние допуска», this.state.allowances); }) } оказывать() { константные классы = useStyles (); возврат ( Разрешить ID Описание Разрешить сумму AllowType { this.state.allowances.map (row => ( { row.AllowID } { row.AllowDesc } { row.AllowAmt } { row.AllowType } )) } ); } } разрешение на экспорт по умолчанию;
l

lwin

3 года назад

Ответов: 28

material-ui Drawer - findDOMNode устарел в StrictMode

У меня есть простое приложение ReactJS, основанное на хуках (без классов) с использованием StrictMode.Я использую React версии 16.13.1 и Material-UI версии 4.9.10.На панели приложений я использую Drawer. Online Information Я замечаю, что когда открываю ящик, я получаю следующее предупреждение.Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely .... in div (created by Transition) in Transition (created by ForwardRef(Fade)) in ForwardRef(Fade) (created by ForwardRef(Backdrop)) in ForwardRef(Backdrop) (created by WithStyles(ForwardRef(Backdrop))) in WithStyles(ForwardRef(Backdrop)) (created by ForwardRef(Modal)) in div (created by ForwardRef(Modal)) in ForwardRef(Portal) (created by ForwardRef(Modal)) in ForwardRef(Modal) (created by ForwardRef(Drawer)) in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer))) Я нашел в Интернете ссылку на эту проблему, но до сих пор не могу понять, как ее решить.Может кто-нибудь добавить обходной путь для этой проблемы?Спасибо
a

angus

2 года назад

Ответов: 5

Необнаруженное неизменное нарушение: слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл

Я пытаюсь добавить закусочную, чтобы отображать сообщение всякий раз, когда пользователь входит в систему или нет. SnackBar.jsx:import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; import CheckCircleIcon from "@material-ui/icons/CheckCircle"; import ErrorIcon from "@material-ui/icons/Error"; import CloseIcon from "@material-ui/icons/Close"; import green from "@material-ui/core/colors/green"; import IconButton from "@material-ui/core/IconButton"; import Snackbar from "@material-ui/core/Snackbar"; import SnackbarContent from "@material-ui/core/SnackbarContent"; import { withStyles } from "@material-ui/core/styles"; const variantIcon = { success: CheckCircleIcon, error: ErrorIcon }; const styles1 = theme => ({ success: { backgroundColor: green[600] }, error: { backgroundColor: theme.palette.error.dark }, icon: { fontSize: 20 }, iconVariant: { opacity: 0.9, marginRight: theme.spacing.unit }, message: { display: "flex", alignItems: "center" } }); function SnackbarContentWrapper(props) { const { classes, className, message, onClose, variant, ...other } = props; const Icon = variantIcon[variant]; return ( {message} )} action={[ ]} {...other} /> ); } SnackbarContentWrapper.propTypes = { classes: PropTypes.shape({ success: PropTypes.string, error: PropTypes.string, icon: PropTypes.string, iconVariant: PropTypes.string, message: PropTypes.string, }).isRequired, className: PropTypes.string.isRequired, message: PropTypes.node.isRequired, onClose: PropTypes.func.isRequired, variant: PropTypes.oneOf(["success", "error"]).isRequired }; const MySnackbarContentWrapper = withStyles(styles1)(SnackbarContentWrapper); const CustomizedSnackbar = ({ open, handleClose, variant, message }) => { return ( ); }; CustomizedSnackbar.propTypes = { open: PropTypes.bool.isRequired, handleClose: PropTypes.func.isRequired, variant: PropTypes.string.isRequired, message: PropTypes.string.isRequired }; export default CustomizedSnackbar; SignInFormContainer.jsx:import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import SnackBar from '../../components/SnackBar'; import SignInForm from './SignInForm'; const SingInContainer = ({ message, variant}) => { const [open, setSnackBarState] = useState(false); const handleClose = (reason) => { if (reason === 'clickaway') { return; } setSnackBarState(false) }; if (variant) { setSnackBarState(true); } return ( ) } SingInContainer.propTypes = { variant: PropTypes.string.isRequired, message: PropTypes.string.isRequired } const mapStateToProps = (state) => { const {variant, message } = state.snackBar; return { variant, message } } export default connect(mapStateToProps)(SingInContainer); При запуске приложения выскакивает ошибка:Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop. at invariant (http://localhost:9000/bundle.js:34484:15) at dispatchAction (http://localhost:9000/bundle.js:47879:44) at SingInContainer (http://localhost:9000/bundle.js:79135:5) at renderWithHooks (http://localhost:9000/bundle.js:47343:18) at updateFunctionComponent (http://localhost:9000/bundle.js:49010:20) at beginWork (http://localhost:9000/bundle.js:50020:16) at performUnitOfWork (http://localhost:9000/bundle.js:53695:12) at workLoop (http://localhost:9000/bundle.js:53735:24) at HTMLUnknownElement.callCallback (http://localhost:9000/bundle.js:34578:14) at Object.invokeGuardedCallbackDev (http://localhost:9000/bundle.js:34628:16) Проблема связана с компонентом SnackBar. Я использую хуки useState, чтобы изменить состояние SnackBar. Должен ли я использовать класс и componentShouldUpdate, чтобы не отображать несколько раз?
S

Slim

3 года назад

Ответов: 9

Как добавить несколько классов в пользовательский интерфейс материалов с помощью свойств классов?

Используя метод css-in-js для добавления классов в компонент реакции, как мне добавить несколько компонентов?Вот переменная классов:const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); Вот как я его использовал:return () Вышеупомянутое работает, но есть ли способ добавить оба класса без использования пакета classNames npm? Что-то вроде:
q

q3e

4 года назад

Ответов: 13

How to style components using makeStyles and still have lifecycle methods in Material UI?

I get the below error whenever I try to use makeStyles() with a component with lifecycle methods: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: You might have mismatching versions of React and the renderer (such as React DOM) You might be breaking the Rules of Hooks You might have more than one copy of React in the same app Below is a small example of code that produces this error. Other examples assign classes to child items as well. I can't find anything in MUI's documentation that shows other ways to use makeStyles and have the ability to use lifecycle methods. import React, { Component } from 'react'; import { Redirect } from 'react-router-dom'; import { Container, makeStyles } from '@material-ui/core'; import LogoButtonCard from '../molecules/Cards/LogoButtonCard'; const useStyles = makeStyles(theme => ({ root: { display: 'flex', alignItems: 'center', justifyContent: 'center', }, })); const classes = useStyles(); class Welcome extends Component { render() { if (this.props.auth.isAuthenticated()) { return ; } return ( ); } } export default Welcome;
M

Matt Weber

3 года назад

Ответов: 8

Как опубликовать данные формы с помощью Material-UI в API

У меня есть POST API, который требует тело запроса в такой форме : { "module_id": 7, "module_type": "Post-Reading", "module_name": "Course Overview", "duration": 70, } Ниже приведен мой код React, я не могу понять, как отправить тело запроса. Кроме того, я хочу обновлять module_id последовательно. Не мог бы кто-нибудь помочь с этим. Я знаю, что здесь много ошибок, пожалуйста, помогите исправить их.import React, { useState, useEffect } from 'react' import Icon from '@material-ui/core/Icon'; import { makeStyles } from '@material-ui/core/styles'; import { TextField } from '@material-ui/core'; import InputLabel from '@material-ui/core/InputLabel'; import FormHelperText from '@material-ui/core/FormHelperText'; import FormControl from '@material-ui/core/FormControl'; import Select from '@material-ui/core/Select'; import NativeSelect from '@material-ui/core/NativeSelect'; import MenuItem from '@material-ui/core/MenuItem'; import Timeline from '@material-ui/lab/Timeline'; import TimelineItem from '@material-ui/lab/TimelineItem'; import TimelineSeparator from '@material-ui/lab/TimelineSeparator'; import TimelineConnector from '@material-ui/lab/TimelineConnector'; import TimelineContent from '@material-ui/lab/TimelineContent'; import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent'; import TimelineDot from '@material-ui/lab/TimelineDot'; import FastfoodIcon from '@material-ui/icons/Fastfood'; import LaptopMacIcon from '@material-ui/icons/LaptopMac'; import HotelIcon from '@material-ui/icons/Hotel'; import RepeatIcon from '@material-ui/icons/Repeat'; import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import axios from 'axios'; const useStyles = makeStyles((theme) => ({ formControl: { margin: theme.spacing(1), minWidth: 120, }, selectEmpty: { marginTop: theme.spacing(2), }, })); const NewModule = () => { const classes = useStyles(); const [state, setState] = useState({}); const [moduleid, setModuleId] = useState(0); const [moduletype, setModuleType] = useState(""); const [modulename, setModuleName] = useState(""); const [duration, setDuration] = useState(0); const [dropdown, setDropdown] = useState([]); useEffect(() => { axios.get("http://localhost:8083/getmoduletypes") .then(res => { setDropdown(res.data) }) .catch(error => { console.log(error) }); }, []); const handleDropdownChange = (event) => { const name = event.target.name; setDropdown({ ...dropdown, [name]: event.target.value, }); }; const handleChangeModuleType = (event) => { const name = event.target.name; setModuleType({ ...moduletype, [name]: event.target.value, }); }; const handleChangeDuration = (event) => { const name = event.target.name; setDuration({ ...duration, [name]: event.target.value, }); }; state = {moduleid, moduletype, modulename, duration}; const submitHandler = (e) => { e.preventDefault(); axios.post("http://localhost:8083/createmodule", state) .then( response => { console.log(response) }) .catch( error => { console.log(error) }) console.log(moduletype); } return ( + Add New Module Choose Module Type handleDropdownChange} label="TypeList" > { dropdown.map(options => {options["module_type"]} )} ADD ) } export default NewModule; Пожалуйста, сообщите мне, как разместить данные в том же формате, а также правильны ли обработчики onChangeHandlers для всего.Спасибо!
u

user14854089

год назад

Ответов: 1

2022 WebDevInsider