Вопросы с тегами [reactjs]

1

голосов
1

ответ
37

Просмотры

Как проверить, если мой список состоит из тех же имени и оповещения уже существует?

Я хочу, чтобы проверить имя, если оно уже выйти или нет. если существует должно быть всплывающим изменить название Вот мой список объектов перед сохранением. изменение входного сигнала handleStoryboardTitleChange = (е) => {this.setState ({storyboardTitle: e.target.value}); }; функция сохранения handleSaveButton = () => {}; Как проверить, если boardTitle уже выйти, если выход нужно всплывающее окно, в дальнейшем он не должен выполнять поток
JMR
1

голосов
1

ответ
787

Просмотры

В App покупки в React-Native Expo?

Я интересно, если есть способ реализации в приложении покупки в Expo для приложения, которое я разрабатываю. Как я исследовал в Интернете, я не нашел однозначного ответа. Может кто-нибудь помочь, пожалуйста?
trill
1

голосов
1

ответ
861

Просмотры

withFormik как получить доступ к реквизиту, завернутой в форме handleSubmit

Я определяю: класс Form1 расширяет React.Component {....}, а затем определить HOC с помощью withFormic: Const Form2 = withFormik ({handleSubmit (значения, {resetForm, setErrors, setSubmitting}) {...}, ... .}) (Form1); В родительском компоненте, я определить функцию обратного вызова: Теперь я хочу handleSubmit вызвать функцию обратного вызова. Я бы просто this.props.callback (), но мне кажется, что это не определено в HOC. Вопрос: как я могу получить доступ к Form1.props в HOC?
Pepe
1

голосов
2

ответ
42

Просмотры

как избежать immutation в Redux

У меня есть проблема с мутацией я не могу понять, вот мой код: Const copyItems = Object.assign ({}, state.items); для (константного typeItems из Object.values ​​(copyItems [0])) {для (пусть пунктов typeItems) {если (items.id === action.item.id) {Object.assign (пункты, action.item); }}} Вернуть state.items; Я также попытался с помощью константного copyItems = state.items.slice (). Отображение (о => ({...} о), но даже при возвращении состояния значения изменяются. Почему?
Zeyukan Ich'
1

голосов
1

ответ
43

Просмотры

Как изменить цвет флажка в antd?

импорт {} Checkbox из «antd» Д-р Джон Как изменить цвет флажка не лэйбл "Д-р Джон? Выше стиль только изменить стили этикетки не флажок?
Henok Tesfaye
0

голосов
1

ответ
8

Просмотры

ReactJS - После того, как компонент крепления необходимо импортировать / повторно запустите локальный файла JavaScript

Нужно импортировать «validation.js» файл внутри другого файла JavaScript в reactjs раз основной файл визуализации метод завершает его выполнения импорта»./Validations'; должен вынести этот JS файла, как только основной компонент визуализирует способ завершить выполнение
Sriram Karthick
0

голосов
0

ответ
25

Просмотры

как отобразить вложенный массив в распределенный массив в редукторе

TLDR: Как бы я лучше отобразить массив в initalState проп Следующий код им пытаются попытка извлечь все postIds из массива, как и сравнить post.id с like.postId Однако like.postId не определен. post.id доступен на лог консоли, разница между столбами, и любит то, что сообщения отображаются на стороне клиента, и любит не являются. Так им пытаются сделать отображение в редукторе, потому что я должен был бы получить сумму, как подсчетов хранимых для каждой должности, и сопоставить его с его уважаемым post.id. Причина, почему я должен был бы установить значения в подобных InitialState, потому что я должен был бы использовать это следующие действия для upvote Сообщений случая ADD_LIKE: // console.log (action.id) // предоставляет идентификатор сообщения, который 2 // console.log (state.posts) // записывает сообщения массива // console.log (состояние. сообщений) возвращение {... состояние, любит: state.likes + 1}; если я сделать что-то подобное, как [0] .postId это будет только получить значения только для этого like.id. Мне нужно, чтобы быть в состоянии получить все любит со всех постов и сравнить like.postId с post.id, а затем установите значение. И получить счетчик как {this.props.likes} только, чтобы получить представление о том, что массив выглядит. Это пример сообщения массива, и в массиве сообщений, у вас есть массив любит. Вот как им-вызова сообщения экспорта константного GetPosts = () => {возвращение (отправка, GetState) => {вернуться Axios.get ( '/ API / сообщения / myPosts') .then ((Рез) => {константные данные = res.data Const любит = res.data // возвращает первый элемент в массиве, и показывает люблю. константный myLikes = любит. журнал (like.postId) // делает неопределенными, //}})})}} это, как его привязывается PostList.js визуализации () {константные {сообщений} = this.props; Возвращение ({posts.map ((пост, я) => ({/ * {...} пост не позволяет нам писать все свойства из * /}))}) действие} GetPosts вызывается внутри этого компонента класса сообщений Компонент расширяет {State = {сообщения: [], загрузки: правда, isEditing: ложь,} асинхронной componentWillMount () {ждут this.props.GetPosts (); this.setState ({загрузка: ложь}) константное reduxPosts = this.props.myPosts; Const ourPosts = reduxPosts console.log (reduxPosts); // показывает линию сообщений 35} визуализации () {сопз {} = нагрузка this.state; константный {myPosts} = this.props если {возвращение () (this.props.isAuthenticated!); } Если (нагрузка) {возвращение "загрузка ..."} возвращение (сообщения); }} Const mapStateToProps = (состояние) => ({isAuthenticated: state.user.isAuthenticated, myPosts: state.post.posts}) = Const mapDispatchToProps (отправка, состояние) => ({GetPosts: () => отправка (GetPosts ())}); экспорт по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (сообщения)); } Вернуться (сообщения); }} Const mapStateToProps = (состояние) => ({isAuthenticated: state.user.isAuthenticated, myPosts: state.post.posts}) = Const mapDispatchToProps (отправка, состояние) => ({GetPosts: () => отправка (GetPosts ())}); экспорт по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (сообщения)); } Вернуться (сообщения); }} Const mapStateToProps = (состояние) => ({isAuthenticated: state.user.isAuthenticated, myPosts: state.post.posts}) = Const mapDispatchToProps (отправка, состояние) => ({GetPosts: () => отправка (GetPosts ())}); экспорт по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (сообщения));
Mr Patel
0

голосов
4

ответ
24

Просмотры

React - show loading message before fetched data is rendered

Я пытаюсь построить среагировать приложение, которое взаимодействует с сервером для запроса данных из базы данных. Я хочу, чтобы отобразить сообщение загрузки, когда приложение извлечения данных. Вот фрагмент кода: класс App расширяет React.Component {конструктор (реквизита) {супер (реквизита) this.clickHandler = this.clickHandler.bind (это); this.state = {isLoading: ложные данные: [], содержание: ''}} clickHandler () {this.setState ({isLoading: истинно}); выборки ( 'URL_1') .then (Рез => res.json ()) .then (данные => this.setState ({данных: данные}, () => {this.getContentByData () // загрузки сообщения исчезли перед тем отображается содержание})) .then (() => this.setState ({isLoading: ложь})); } GetContentByData () {выборки ( `url_2 данных = $ {this.state.data?}`) .Then (Рез => res.json ()) .then (содержание => this.setState ({содержание: содержание}) )} визуализации () {возвращение ({this.state.isLoading загрузка: нулевая}! {} this.state.content Click Me)}} ReactDOM.render (, document.getElementById ( 'приложение')) сообщение загрузки исчезла перед отображением контента. Как я могу это исправить? )}} ReactDOM.render (, document.getElementById ( 'приложение')) Нагрузка сообщение исчезло перед отображением содержимого. Как я могу это исправить? )}} ReactDOM.render (, document.getElementById ( 'приложение')) Нагрузка сообщение исчезло перед отображением содержимого. Как я могу это исправить?
Eric Hung
0

голосов
1

ответ
14

Просмотры

Как получить доступ к крючкам сеттера в функции OnClick

Я переписывание класса компонента к функциональному компоненту, но я не могу понять, как получить доступ к крючкам сеттера в функции OnClick. Заявляю крюк, как обычно, которая является переменной и сеттер для доступа к имени пользователя: экспорт функции Header (реквизит: IHeaderProps) {Const [имя пользователя, setUsername] = useState ( «»); // установить имя пользователя в заголовке, если найден в useEffect хранения (() => {Const маркер = JSON.parse (localStorage.getItem (TOKEN_NAME) || '{}'); если (token.Username) {setUsername (token.Username );}}); ...... В JSX я есть кнопка "выход". При нажатии, она вызывает функцию handleLogout, где мне нужно, чтобы установить имя пользователя в пустую строку: .... .... функция handleLogout () {... // как я могу установить имя пользователя на пустую строку здесь? } Но как я могу добиться этого? Когда это класс компоненты я имел доступ к переменному состоянию, что такое правильный способ справиться с этим с помощью крючков? Я использую машинопись с правилом «не может использовать лямбда в разметке»
melbil
0

голосов
0

ответ
15

Просмотры

Как передать значение из апи вызова InitialState в редукторе

Я пытаюсь сделать это можно любить пост, и позволить ему обновить без повторного отображения страницы. Следующий код позволяет пользователю нравится пост, но только при обновлении я могу видеть обновленный как кол. Подобный от отображенных сообщений массива, как это и я получаю число подобных на пост, как этот likes.length как бы я иметь возможность обновлять количество подобных, когда это действие называется экспорт Const postLike = (ID) => {возвращение (отправка) => {// console.log (идентификатор пользователя); вернуться Axios.post ( '/ апи / сообщений / как', {сообщения дан: идентификатор}). Затем ((как) => {отправка ({тип: ADD_LIKE, идентификатор}) // console.log ( 'вы это понравилось »., например)}) улов ((ERR) => {console.log ( 'там, кажется, ошибка', ERR); })}} экспорт константные GetPosts = () => {возвращение (отправка, GetState) => {вернуться Axios.get ( '/ API / сообщений / myPosts') .Затем ((разреш) => {константных данных = разреш. сопзИте данные нравится = res.data [0] .Likes // возвращает первый элемент внутри массива, и показывает люблю я должен были бы получить все сообщения любит не только первый console.log пункта (любит);. // данные журналов и я могу видеть отправку массива ({тип: GET_POSTS, данные})})}} следующий код не работает, я должен обновить страницу, чтобы увидеть обновленное количество подобных. Как бы я быть в состоянии преобразовать Likes.lenght в состояние, так что она может автоматически обновлять OnClick как от Like компоненты? Я знаю, что любит: 0 не получает значение подобных для каждой должности. Как бы я сделать это возможным? Редуктор импорт {ADD_LIKE} от '../actions/'; Const InitialState = {пост: [], postError: Null, сообщения: [], isEditing: ложь, isEditingId: нулевой, любит: 0, сообщения дан: нулевая} экспорта по умолчанию (состояние = InitialState, действие) => {переключатель (действие. типа) {случай GET_POSTS: возвращение {... состояние, сообщений: action.data} случай ADD_LIKE: console.log (action.id) // предоставляет идентификатор сообщения, который 2 console.log (state.posts) // записывает сообщения возвращение массива {... состояние, сообщений: state.posts.map (пост => {если (post.id === action.id) {возвращение {... пост, любит: post.likes + 1}} еще возвращение пост})}; импорт PostItem компонентов React, {Компонент} от ' реагируют '; импорт бумаги из '@ материал-Ui / ядро ​​/ Paper'; Кнопка импорта из '@ материал-Ui / ядра / Button'; импорт типографика от @ материала-Ui / ядра / Типографики '; импорт момент от «момента»; импорт редактируемые из «./Editable»; импорта {} соединить с 'среагировать-Redux'; импорт {UpdatePost, postLike} от '../actions/'; импорт, как из «./Like»; импорт Вардар из»../Axios'; Стили константные = {myPaper: {поле: '20px 0px', обивка: '20px'}, кнопка: {marginRight: '30px'}} Класс PostItem расширяет Компонент {Конструктор (реквизит) {супер (реквизит); this.state = {отключена: ложь, MyID: 0, нравится: 0}} OnUpdate = (идентификатор, название) => () => {// нам нужен идентификатор так Експрес знает, что после обновления, а заголовок в том, что только редактирование названия. если (! this.props.myTitle == NULL) {константные кредитки = {идентификатор, название} this.props.UpdatePost (кредитки); }} Визуализации () {сопз {название, идентификатор, идентификатор пользователя, removePost, createdAt, POST_CONTENT, имя пользователя, editForm, isEditing, editChange, myTitle, postUpdate, Любит, clickLike} = this.props возврата ({/ * если еще оператор teneray * /} {isEditing (?): ({Название})} {} POST_CONTENT по: {имя пользователя} {момент (createdAt) .calendar ()} {isEditing!? (Edit) :( // ПАРОЛЯ, и myTitle, который, как мы помним myTitle это новое значение при обновлении названия ({isEditingId: state.post.isEditingId}) Const mapDispatchToProps = (отправка) => ({// Передает кредитку который можно назвать что-нибудь, но я просто называю его полномочия, но это должно быть названо нечто большее // специфичны. UpdatePost: (кредитки) => отправка (UpdatePost (кредитки)), postLike: (идентификатор) => отправка (postLike (идентификатор)) // Передать идентификатор к функциям DeletePost. }); экспорта по умолчанию подключения (нуль, mapDispatchToProps) (PostItem); Как импорт компонентов React, {Компонент} от 'реагирует'; импорт ReactDOM из 'реагируют-DOM' импорта {FontAwesomeIcon} от '@ fortawesome / реагируют-fontawesome'; импорт {faCoffee, faAdjust} от '@ fortawesome / свободной Сплошной-SVG-иконка'; импорта {} соединить с 'среагировать-Redux'; импорт {postLike} от '../actions/'; Класс Как распространяется Компонент {Конструктор (реквизит) {супер (реквизит); this.state = {любит: пустое, сердце: ложь}} clickLike = (идентификатор) => {This.props.postLike (ID); // переключает между классом CSS this.setState ({сердце: this.state.heart})} визуализации () {возвращение (this.clickLike (this.props.like)}> Как // получает любит {this.props. любит})}} константный mapStateToProps = (состояние) => ({isEditingId: state.post.isEditingId, likeCount: state.post.likes}) = Const mapDispatchToProps (отправка) => ({postLike: (ID) => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}). экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как); postLike (ID); // переключает между классом CSS this.setState ({сердце: this.state.heart})} визуализации () {возвращение (this.clickLike (this.props.like)}> Как // получает любит {this.props. любит})}} константный mapStateToProps = (состояние) => ({isEditingId: state.post.isEditingId, likeCount: state.post.likes}) = Const mapDispatchToProps (отправка) => ({postLike: (ID) => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}). экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как); postLike (ID); // переключает между классом CSS this.setState ({сердце: this.state.heart})} визуализации () {возвращение (this.clickLike (this.props.like)}> Как // получает любит {this.props. любит})}} константный mapStateToProps = (состояние) => ({isEditingId: state.post.isEditingId, likeCount: state.post.likes}) = Const mapDispatchToProps (отправка) => ({postLike: (ID) => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}). экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как); // переключает между классом CSS this.setState ({сердце: this.state.heart})} визуализации () {возвращение (this.clickLike (this.props.like)}> Как // получает любит {this.props. любит})}} константный mapStateToProps = (состояние) => ({isEditingId: state.post.isEditingId, likeCount: state.post.likes}) = Const mapDispatchToProps (отправка) => ({postLike: (ID) => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}). экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как); // переключает между классом CSS this.setState ({сердце: this.state.heart})} визуализации () {возвращение (this.clickLike (this.props.like)}> Как // получает любит {this.props. любит})}} константный mapStateToProps = (состояние) => ({isEditingId: state.post.isEditingId, likeCount: state.post.likes}) = Const mapDispatchToProps (отправка) => ({postLike: (ID) => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}). экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как); сердце})} визуализации () {возвращение (this.clickLike (this.props.like)}> Как // получает {Likes this.props.likes})}} Const mapStateToProps = (состояние) => ({isEditingId: состояние .post.isEditingId, likeCount: state.post.likes}) = Const mapDispatchToProps (отправка) => ({postLike: (ID). => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}); экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как); сердце})} визуализации () {возвращение (this.clickLike (this.props.like)}> Как // получает {Likes this.props.likes})}} Const mapStateToProps = (состояние) => ({isEditingId: состояние .post.isEditingId, likeCount: state.post.likes}) = Const mapDispatchToProps (отправка) => ({postLike: (ID). => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}); экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как); как)}> Как // получает любит {this.props.likes})}} Const mapStateToProps = (состояние) => ({isEditingId: state.post.isEditingId, likeCount: state.post.likes}) Const mapDispatchToProps = ( отправка) => ({postLike: (ID). => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}); экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как); как)}> Как // получает любит {this.props.likes})}} Const mapStateToProps = (состояние) => ({isEditingId: state.post.isEditingId, likeCount: state.post.likes}) Const mapDispatchToProps = ( отправка) => ({postLike: (ID). => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}); экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как); isEditingId, likeCount: state.post.likes}) = Const mapDispatchToProps (отправка) => ({postLike: (ID). => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}); экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как); isEditingId, likeCount: state.post.likes}) = Const mapDispatchToProps (отправка) => ({postLike: (ID). => отправка (postLike (ID)) // Передать идентификатор к функциям DeletePost}); экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (как);
Mr Patel
1

голосов
2

ответ
543

Просмотры

How to wrap render Function in React?

I have already wrap the render function in ES5 like: var Test = React.createClass({ componentDidUpdate:function() { this.refs.table.cleanSelected(); }, getInitialState: function() { return getItemPropertyData(); }, render:ExceptionInterceptor('Test','render',function(){ return( Test ) }) }); My ExceptionInterceptor component look like var ExceptionInterceptor = function (fileName, functionName, renderFunction, component) { return function () { try { return renderFunction.apply(this, arguments); } catch (e) { console.log(e); } } }; Now I want to apply same wrapping in ES6 component render method like export default class Test extends React.Component { componentDidUpdate() { this.refs.table.cleanSelected(); } getInitialState() { return getItemPropertyData(); } render() { return( Test ) } } How can I wrap the render method with ExceptionInterceptor in my above mentioned es6 code?
Dhaval Patel
0

голосов
0

ответ
8

Просмотры

Как исправить ошибки eslint при использовании Реагировать контекст (потребитель-провайдер)?

Я использую Реагировать Context API с поддержкой ESLint и некоторые проблемы фиксирующих вопросы ESLint. Поставщик: возвращение ({this.props.children} Проблема: ESLint сообщает об ошибке Разбор: Неожиданный маркер для потребителя:. {({IsAuthorized}) => {возврата (// некоторый код здесь)}} Проблема: ESLint сообщает об ошибке Разбор: Неожиданный маркер {для {({isAuthorized}) => {конфигурации ESLint.
root_access
1

голосов
2

ответ
1.2k

Просмотры

Управление состоянием в многократных DropDown в React (Семантический-интерфейс)

Я выполняю документацию здесь, чтобы создать меню, управляемый компонент выпадающего. Как бы я быть в состоянии изменить свою функцию handleChange, чтобы сделать это известно, что он получает значение из выпадающего списка «Выбрать член» или в раскрывающемся списке «Выбрать день», так что я могу обновить государственные значения соответственно ( «член» и " ? час) импорт React, {Component} от 'среагировать' импорт {Выпадающее, Сетка} из 'семантико-ще реагируют' класс DropdownExampleRemote расширяет компонент {componentWillMount () {this.setState ({optionsMembers: [{ключ: 1, текст : 'ЕЖЕДНЕВНЫЙ', значение: 'ЕЖЕДНЕВНЫЙ'}, {ключ: 2, текст: 'ЕЖЕМЕСЯЧНОЕ', значение: 'ЕЖЕМЕСЯЧНОЕ'}, {ключ: 3, текст: 'НЕДЕЛЬНЫЙ', значение: 'НЕДЕЛЬНЫЙ'},], optionsDays: [{ключ: 1, текст: 'воскресенье', Значение: 'воскресенье'}, {ключ: 2, текст: 'понедельник', значение: 'понедельник'}, {ключ: 3, текст: 'вторник', значение: 'вторник'},], значение: '', член: '', час: '',})} handleChange = (е, {значение}) => {this.setState ({член: значение})} визуализации () {сопз {optionsMembers, optionsDays, значение} = это .state возвращение ({this.state.member} {this.state.day})}} экспорта по умолчанию DropdownExampleRemote UPDATE: Решение работает для обновления состояния. До сих пор не знаю, почему выбор раздаточной не прилипает и по умолчанию заполнителя. Понедельник»}, {ключ: 3, текст: 'вторник', значение: 'вторник'},], значение: '', член: '', час: '',})} handleChange = (е, {значение} ) => {this.setState ({член: значение})} визуализации () {константные {optionsMembers, optionsDays, значение} = this.state возврата ({this.state.member} {this.state.day})}} экспорт по умолчанию DropdownExampleRemote UPDATE: Решение работает для обновления состояния. До сих пор не знаю, почему выбор раздаточной не прилипает и по умолчанию заполнителя. Понедельник»}, {ключ: 3, текст: 'вторник', значение: 'вторник'},], значение: '', член: '', час: '',})} handleChange = (е, {значение} ) => {this.setState ({член: значение})} визуализации () {константные {optionsMembers, optionsDays, значение} = this.state возврата ({this.state.member} {this.state.day})}} экспорт по умолчанию DropdownExampleRemote UPDATE: Решение работает для обновления состояния. До сих пор не знаю, почему выбор раздаточной не прилипает и по умолчанию заполнителя. })} HandleChange = (е, {значение}) => {this.setState ({член: значение})} визуализации () {константные {optionsMembers, optionsDays, значение} = this.state возврата ({this.state.member } {this.state.day})}} экспорта по умолчанию DropdownExampleRemote UPDATE: Решение работает для обновления состояния. До сих пор не знаю, почему выбор раздаточной не прилипает и по умолчанию заполнителя. })} HandleChange = (е, {значение}) => {this.setState ({член: значение})} визуализации () {константные {optionsMembers, optionsDays, значение} = this.state возврата ({this.state.member } {this.state.day})}} экспорта по умолчанию DropdownExampleRemote UPDATE: Решение работает для обновления состояния. До сих пор не знаю, почему выбор раздаточной не прилипает и по умолчанию заполнителя. день})}} экспорта по умолчанию DropdownExampleRemote UPDATE: Решение работает для обновления состояния. До сих пор не знаю, почему выбор раздаточной не прилипает и по умолчанию заполнителя. день})}} экспорта по умолчанию DropdownExampleRemote UPDATE: Решение работает для обновления состояния. До сих пор не знаю, почему выбор раздаточной не прилипает и по умолчанию заполнителя.
1

голосов
1

ответ
1k

Просмотры

Ленивые Загрузка маршрутов в React С машинопись AsyncComponent

Я пытаюсь ленивыми маршруты нагрузки в React путем реализации класса AsyncCompoment как описано здесь Code Расщепление Создать Реагировать App. Ниже функция ES6 asyncComponent из учебника: импорт React, {Компонент} из «реагируют»; экспорт функция по умолчанию asyncComponent (importComponent) {класса AsyncComponent расширяет компонент {конструктор (реквизит) {супер (реквизит); this.state = {компонента: нуль}; } Асинхронной componentDidMount () {сопз {по умолчанию: компонент} = ждут importComponent (); this.setState ({компонента: компонент}); } Визуализации () {константный C = this.state.component; вернуться C? : ноль; }} Вернуть AsyncComponent; } I» ве написал эту функцию в машинописи и может подтвердить, что компоненты действительно загружается лениво. Вопрос я сталкиваюсь в том, что они не оказаны. Я был в состоянии определить, что объект компоненты всегда определен в componentDidMount крючке: //AsyncComponent.tsx асинхронной componentDidMount () {сопз {по умолчанию: компонент} = ждет importComponent (); this.setState ({компонента: компонент}); } Объект возвращается из функции importComponent обладает следующими свойствами: {MyComponent: класс MyComponent: F, __esModule: истинно} Я изменил метод componentDidMount принять первое свойство этого объекта, который является классом MyComponent. После этого изменения моего проект теперь ленивая загрузки компонентов и делают их правильно. асинхронное componentDidMount () {константный компонент = ждет importComponent (); this.setState ({компонента: компонент [Object.keys (компонент) [0]]}); } Моя догадка, что я не написал эту строку правильно в машинописи: Const {по умолчанию: компонент} = ждут importComponent (); Я вызываю метод asyncComponent как так: Const MyComponent = asyncComponent (() => импорт (./ компоненты / MyComponent)); Кто-нибудь знает, как реализовать AsyncComponent в машинописи? Я не уверен, если просто получаю индекс 0 на объекте esModule правильный способ сделать это. Const {по умолчанию: компонент} = ждут importComponent (); Я вызываю метод asyncComponent как так: Const MyComponent = asyncComponent (() => импорт (./ компоненты / MyComponent)); Кто-нибудь знает, как реализовать AsyncComponent в машинописи? Я не уверен, если просто получаю индекс 0 на объекте esModule правильный способ сделать это. Const {по умолчанию: компонент} = ждут importComponent (); Я вызываю метод asyncComponent как так: Const MyComponent = asyncComponent (() => импорт (./ компоненты / MyComponent)); Кто-нибудь знает, как реализовать AsyncComponent в машинописи? Я не уверен, если просто получаю индекс 0 на объекте esModule правильный способ сделать это.
Mike Lunn
1

голосов
2

ответ
980

Просмотры

Использование более чем с Lo тире

Как отфильтровать массив, используя больше и меньше, чем с Lo Даш? ИСПользоВание Lo Дэша _.find демо-данные: пользователи вар = [{ 'пользователь': 'Barney', 'возраст': 36, 'активный': истинно}, { 'пользователь': 'Фрэд', 'возраст': 40, 'активный' ложь}, { 'пользователь': 'камешки', 'возраст': 1, 'активный': истинно]}; Я хотел бы найти всех пользователей в течение 30 вар over30 = _.find (пользователи, функция (о) {возврата o.age> 30;}); Однако это возвращает первый пользователь, Barney, вместо Барни и Фред. Я пробовал различные комбинации следующих. _.find (пользователи, [ 'возраст',> 30]);
Bethany
0

голосов
0

ответ
4

Просмотры

Реагировать-Testing-Library - Упаковочный компонент с Redux и маршрутизатором

Я пытаюсь настроить файл тест для визуализации маршрута / страниц на моем приложении. Я пытаюсь обернуть все с Redux и маршрутизатором, и это то, что у меня есть: импорт Реагировать из «реагировать»; импорт {оказывают} от «среагировать тестирования-библиотека»; импорт {} createStore от 'Redux'; импорта {} Провайдер от 'среагировать-Redux'; импорт редуктор от «../../store/reducer»; импорт {Ссылка, маршрут, маршрутизатор, коммутатор} от «реагировать-маршрутизатор-дом» импорта {createMemoryHistory} из «истории» импорта ViewNode из «../Pages/ViewNode»; Const customRender = (щ, {путь = '/', история = createMemoryHistory ({initialEntries: [путь]}), InitialState, магазин = createStore (редуктор, InitialState), ... опции} = {}) => ({ ... оказывать ({щ}, варианты), история,}); тест ( 'может сделать с Redux и маршрутизатором', () => {сопз {getByTestId} = customRender ({маршрут: '/server/prod/some.server.name.com'}); ожидать (getByTestId (» страниц контента.)) toBeVisible ()}) Тогда я получаю следующее сообщение об ошибке: ошибка: неперехваченным [TypeError: не удается прочитать свойство „Params“ неопределенной] причина этого бросает ошибку, потому что не может найти Реагировать маршрутизатор PARAMS , Это провал в конструкторе компоненты при Im инициализации состояния: this.state = {модальный: ложь, activeTab: '1', imageStatus: "загрузка", ENV: props.match.params.env, // неудачи здесь NODENAME: реквизит .match.params.nodeName, сред: props.environments} Похоже, что это ISN» т оберточной маршрутизатор правильно с моей реализации выше. Как бы я правильно обернуть мою страницу компоненту с Redux и маршрутизатором так, что он может получить этот маршрутизатор Params?
Phillip
1

голосов
1

ответ
3.8k

Просмотры

ReactJS реквизит ошибки машинописи параметров неявно имеет «любой» типа

После и адаптация учебника здесь, я врезался в препятствие при попытке определить функцию, чтобы сделать некоторый HTML. функционирования панели инструментов (реквизит) {возвращение (props.onClick ()}> Refresh); } Это ошибки в машинописи, потому что реквизита не определена. Я понимаю, почему я получаю эту ошибку, но то, что я пропускаю, какой тип должен быть реквизитом? Я считаю, что я должен тогда быть в состоянии использовать это внутри другого компонента, как это: функция App () {возвращения (оповещения ( «привет мир»)}> Test); } И реквизита только то, что я указываю. Это, казалось бы, подтверждается здесь: хотя эта ссылка не упоминает машинопись. Итак, мой вопрос: как же эта функция (т.е. перехода свойств в функцию или класс) работают с машинописью, когда, по определению, вы не»
Paul Michaels
1

голосов
1

ответ
632

Просмотры

Реагировать v4 Router на изменение

Я разрабатываю обычные Реагировать JS приложения и с помощью BrowserRouter. Мне нужно знать, когда изменение маршрута и единственное, что я нашел в том, чтобы использовать пакет истории те же ребята (реагируют-обучение). Их пример выглядит достаточно просто, но не работает вообще для меня: импорт createHistory из «История / createBrowserHistory» Const истории = createHistory () console.log ( «а») history.listen ((место, действие) => {консоли. войти ( `текущий URL составляет $ {location.pathname} $ {location.search} $ {location.hash}`) console.log ( `Последнее действие навигации было $ {действие} ')}) Const A = реквизита = > A B константная в = реквизите => в виде ReactDOM.render (, document.getElementById ( 'приложение')) консоль печатает "а" но слушать обратный вызов никогда не вызывается, когда я нажимаю вокруг и мои изменений URL. Существует не так много больше в своей документации, так кто-нибудь знает, чего не хватает?
Michel H.
1

голосов
2

ответ
569

Просмотры

Реагировать приложение на сервере при обновлении страницы показывает страницу 404

Я построить реагировать приложение, используя create_react_app. Теперь я перехожу сборки на сервер и запустить приложение, используя служить. Мое приложение будет загружать данные из APIs. Когда я обновить страницу он показывает 404 страница не найдена ошибка. Кроме того, я попытался с HTTP-сервером Когда я была некоторая страница / панелью и refersh страницы он показывает 404. Теперь я должен идти к base_url / только тогда она работает. Но в моем местном, когда я refersh все работает. Это мой package.json "реагируют-даты": "^ 17.0.0", "реагировать-дом": "^ 16.4.0", "реагировать-i18next": "^ 7.7.0", "реагировать-Redux" : "^ 5.0.7", "реагировать-маршрутизатор": "^ 4.2.0", "реагировать-маршрутизатор-дом": "^ 4.2.2", "реагировать скрипты": "1.1.4" И я использую апач на моем сервере. Я думаю, что это проблема не с моим кодом. Если вы, ребята, знаете что-нибудь об этом, пожалуйста, помогите мне. И команда запуска HTTP-сервер был HTTP-сервер ./build -p 7001
Sivabalan
1

голосов
1

ответ
45

Просмотры

Разница между LocalStorage и сессии [закрыт]

Я создал аутентификацию пользователя с паспортной локальной стратегией, и я использую сессию. Каждый раз, когда пользователь вошел в сессии хранится в базе данных и в браузере. В моем веб-интерфейсе можно использовать user.id, чтобы сохранить его в локальном хранилище в качестве ключа или маркер?
Sadiq Mustapha Aji
1

голосов
1

ответ
438

Просмотры

React Component Rendering Twice

So like the title says my homepage of my application is rendering twice for some reason and I am not sure why. From my BrowserRouter I am initially calling one JS file and from there I call my HomePage component and React Router but then my page is rendering twice and I am not sure why. My Browser Router (index.js): import React from 'react' import { render } from 'react-dom' import { BrowserRouter } from 'react-router-dom' import App from './App'; render(( ), document.getElementById('root')); Then App.js is called: const App = () => ( ) export default App; Then my homepage component(index.jsx): import React from 'react'; import { Link } from 'react-router-dom'; const HomePage = () => ( Home Projects Future Work About Me A Peak Into My Life New Production Build Projects Will Be Shown Here: This is the Flinder application: ) export default HomePage; And Route.js: const Routes = () => ( ) But then my page is rendering like this: I am really confused so any advice will help! I'm guessing there may an issue because I am calling a jsx file instead of a js file in my route?
Jack
1

голосов
2

ответ
51

Просмотры

Обработка несколько Вардар получать запросы внутри componentDidMount

У меня есть React компонент, как это: класс Пример расширяет Компонент {Конструктор (реквизит) {супер (реквизит); this.state = {имя: '', адрес: '', телефон: ''}.} componentDidMount () {// APIcall1, чтобы получить имя и установить состояние // т.е. axios.get (), затем (this.setState ()) // APIcall2, чтобы получить адрес и установить состояние // APIcall3, чтобы получить телефон и установить состояние}} `Как вы можете видеть, что я делаю три API получить запросы, чтобы получить подробную информацию и установки состояния три раза после того, как получение данные. В связи с этим, я получаю эту ошибку: Предупреждение: Не удается обновить в течение существующего перехода состояния (например, в визуализации или конструктора другого компонента). Рендер методы должна быть чистой функцией реквизита и состояния; Конструктор побочные эффекты являются анти-модель, но может быть перемещен в componentWillMount. Кстати, я не приводит к изменению состояния в методе визуализации. Во всяком случае, чтобы решить эту проблему?
user117829
1

голосов
2

ответ
207

Просмотры

Передача подпорку к ребенку от родителей с React и Гэтсби

Гэтсби новичок здесь, так что будьте терпеливы со мной. Я строй очень простое приложение блог с Гэтсби и React. У меня есть целевая страница с разделом, где я отображать последние сообщения 3 пользователя, которые были опубликованы. До сих пор все работало нормально со следующим кодом в моем index.js файла: импорт Реагировать из «реагировать» импорта {Link, graphql} из «Гэтсби» импорта получить от «lodash / получить» импорт Bio от»../components/ Bio 'импорт макета из' 'импорта SEO из' '../components/Layout импорта {formatReadingTime} от' ../components/SEO класса ../utils/helpers' BlogIndex расширяет React.Component {визуализации () {сопз siteTitle = получить (это, 'props.data.site.siteMetadata.title') Const siteDescription = прибудет (это, 'props.data.site.siteMetadata.description' timeToRead)} `})})})}} экспорта по умолчанию BlogIndex экспорт константные pageQuery = graphql` запрос {{сайт siteMetadata {описание название}} allMarkdownRemark (сортировка: {поля: [frontmatter___date], порядок: DESC}) {ребра { узел {поля {} пробкового timeToRead frontmatter {дата (FormatString: «MMMM ДД, YYYY») название спойлера}}}}} `Тем не менее, я хотел бы отделить последние сообщения в блоге раздел в отдельный компонент (например, LatestBlogPosts.js. ) и импортировать его в моем index.js файле. Следовательно, Я скопировал разметку в отдельном файле, импортирован файл в моих index.js и вдруг есть сообщение об ошибке сказав: TypeError: Не удается прочитать свойство «кусок» неопределенных я проверил и сообщения протоколирования из вновь созданного файла также возвращает не определено. Файл LatestBlogPosts.js выглядит следующим образом: импорт Реагировать из «реагировать» импорт {Ссылка} из «Гэтсби» импорта {formatReadingTime} из «../utils/helpers»; импорт получить от 'lodash / получить' LatestBlogPosts класс расширяет React.Component {визуализации () {сопзЬ размер = 3 сообщений Const = получить (это, 'props.data.allMarkdownRemark.edges') возврата ({posts.slice (0, размер ) .map (({узел}) => {Const название = получить (узел, 'frontmatter.title') || node.fields. / Utils / типографика»импорт LatestBlogPosts из "../components/LatestBlogPosts"; Класс BlogIndex расширяет React.Component {визуализации) {сопз siteTitle = прибудет (это, 'props.data.site.siteMetadata.title') Const siteDescription = прибудет (это, 'props.data.site.siteMetadata.description') возвращение ( ()}} экспорта по умолчанию BlogIndex экспорта константные pageQuery = graphql` запрос {{сайт siteMetadata {описание заголовка}} allMarkdownRemark (сортировки: {полей: [frontmatter___date], порядок: по убыванию}) {ребер {узлов {полей {} пробкового timeToRead frontmatter {дата (FormatString: "MMMM DD, YYYY"
birdybird03
1

голосов
4

ответ
143

Просмотры

Очистка форм в React после подачи

Я пытаюсь очистить данные формы, как только создавая форму представления с Аксиос. Сообщение проходит через штраф и ответ записывается на страницу, но данные в каждом текстовом поле остается на странице после подачи. Я попытался добавить функцию resetForm где я установить форму обратно в исходное состояние заготовки, но это не работает. импорта React, {Компонент} от 'реагируют'; импорт {Сетка, Cell, TextField, кнопка} от 'среагировать-леев'; импорт»./Contact.css'; импорт Вардар из «Аксиос»; класс Contact расширяет компонентный {конструктор (реквизит) {супер (реквизит); this.state = {FullName: "", адрес электронной почты: "", сообщение: ""}; } ResetForm = () => {this.baseState = this.state this.setState (this.baseState)} handleForm = е => {Axios.post ( "https://formcarry.com/s/axiosID", this.state, {заголовки: { "Accept": "приложения / JSON"}}) .then (функция (ответ) {пусть successMessage = document.querySelector ( 'успех-сообщения. '); successMessage.innerHTML = JSON.stringify (response.data.title);}) .catch (функция (ошибка) {пусть successMessage = document.querySelector (' успех-сообщение'. ); successMessage.innerHTML = JSON.stringify (ошибка);}); e.preventDefault (); } HandleFields = е => this.setState ({[e.target.name]: 'e.target.value'}); )}} Экспорт контактов по умолчанию; Все, что я действительно хочу для текстовых полей FULLNAME, электронная почта и сообщение, чтобы очистить когда я отправить форму, но данные остаются на этой странице.
Ang
1

голосов
2

ответ
32

Просмотры

ReactJS не может получить доступ к объекту ответа в SetState

Я пытаюсь обновить setSet как часть выхода из моей RestAPI. Однако я получаю сообщение об ошибке, что объект ответа неопределенные. Я могу войти его внешний метод SetState. Код addNewTodo = () => {axios.post ( 'HTTP: // локальный: 5001 / Todos', "задача =" + this.state.newTodoList.task) .then (ответ => console.log (response.data )) .then (ответ => {this.setState (prevState => ({ToDoList: prevState.TodoList.push (response.data),}))}); {This.toggleNewTodoModal ()}} Я получаю следующий журнал в консоли до ошибки {задачи: «ДДД», ID: «todo10»} Ошибка: Ошибка типа: Не удается прочитать свойство «данные» неопределенных на следующие строки ToDoList: prevState.TodoList. толчок (response.data),
Gaurang Shah
1

голосов
1

ответ
86

Просмотры

Как сделать реагировать-выбрать параметры прокручиваются

У меня есть список опций, в которые отображаются в реакции, выберите. Так как этот компонент находится на нижнем крае экрана элементы, как правило, чтобы отрезать от экрана. Я заметил, что списки выбора, представленные в официальном срабатывают, выберите предоставленную полосу прокрутки. Я пытался смотреть на документы и на странице GitHub, но я до сих пор не мог понять решение. На рисунке ниже показано, как отображается мой список реагирующие-выбора опции. Мой вопрос заключается в том, как я делаю список отображения будет прокручивать. Ниже приведен код, который я использовал. импорт Выберите из «реагировать-выберите»; Const SearchSelect = (реквизит) => {{константные параметры, DefaultValue, OnChange, имя, метка} = реквизит; вернуть ({метку && {метку}}); }; Значения опции первоначально взяты из API и передаются в этот компонент от родителя.
Muljayan
1

голосов
3

ответ
45

Просмотры

Частная NPM ошибка библиотека рейза «Модуль синтаксического анализа не удалось»

Я пытаюсь создать свой libary с React и использовать его локально (с моей компанией мерзавец хранилищем). Я могу проверить мое приложение в то время как developping с началом НПМ выполнения. Мое приложение работает. Но когда я хочу использовать его в другом проекте, я получил эту ошибку: Ошибка в ./node_modules/mylib/src/views/calendar.jsx модуле синтаксического анализа не удалось: Неожиданный маркер (10:53) Вам может понадобиться соответствующий загрузчик для обрабатывать файлы этого типа. Линия задействованного: Const Календарь = ({месяц = ​​момент (), dayCellTitle =, заголовок = дети}) => {пакет импортируется так: "MyLib": «мерзавец + SSH: // мерзавец @ gitlab. mycompany.ch:mylib/mylib.git»Я стараюсь, но я получил худший: Plugin / файлов Предустановленные не разрешено экспортировать объекты, только функции. В / дома / ххххх / Документы / рабочие области / реагируют-календарь / node_modules / Babel предварительная установка стадии-0 / Библиотека / индекс. JS здесь файлы моего пакета: webpack.config.js константного пути = требуется ( «путь»); Const упак = требуется ( './ package.json'); Const LibraryName = pkg.name; module.exports = {выход: {путь: path.join (__ имя_директории, './dist'), имя файла: 'реагируют-calendar.js', библиотека: LibraryName, libraryTarget: 'UMD', publicPath: '/ расстояние /' , umdNamedDefine: истинный}, модуль: {правила: [{тест: /\.(js|jsx)$/, исключить: / node_modules /, использование: [ 'Бабель-погрузчик']}]}, постановляю: {псевдоним: { 'реагируют': path.resolve (__ DIRNAME, './node_modules/react '), 'реагируют-DOM': path.resolve (__ имя_директории,' ./node_modules/react-dom'),}}, {внешние: / / не связывайте реагировать или реагировать-РОМ реагируют: {CommonJS: " Есть ли способ узнать, если библиотека будет импортирована без ошибок, прежде чем делать импорт в другом проекте Edit я добавил пряжи перспективе построить на мой package.json, и запуск его не вызывают каких-либо ошибок: Entrypoint главный [большой] = реагирующие-calendar.js [45] (WebPack) /buildin/module.js 497 байт {0} [встроенный] [48] (WebPack) /buildin/global.js 472 байт {0} [встроенный] [244] ./ node_modules. / минуту / национальная_версия синхронизации ^ \ \ /.*$ 3 KiB {0} [необязательно] [встроенные] [368] ./src/index.js + 52 модули 182 KiB {0} [встроенные] | ./src/index.js 65 байт [встроенный] | ./src/views/calendar.jsx 1,17 KiB [встроенный] | ./src/views/day_cell_title.jsx 358 байт [встроенный] | ./src/views/calendar_header.jsx 1,15 KiB [встроенный] | ./src/store/calendar_store.js 3,85 KiB [встроенный] | ./src/views/calendar_grid.jsx 1,49 KiB [встроенный] | , /src/views/calendar_navigation_button.jsx 928 байт [встроенный] | ./src/views/calendar_title.jsx 290 байт [встроенный] | ./src/generators/month_generator.js 556 байт [встроенный] | ./src/painters/day_cell_color.js 593 байт [встроенный] | ./src/views/day_cell_content.jsx 547 байт [встроенный] | ./src/settings.js 332 байт [встроенный] | ./src/painters/event_color.js 374 байт [встроенный] | ./src/painters/range_color.js 591 байт [встроенный] | ./src/views/empty_day_cell_content.jsx 340 байт [встроенный] | + 38 скрытые модули + 743 скрытые модули JS 332 байт [встроенный] | ./src/painters/event_color.js 374 байт [встроенный] | ./src/painters/range_color.js 591 байт [встроенный] | ./src/views/empty_day_cell_content.jsx 340 байт [встроенный] | + 38 скрытые модули + 743 скрытые модули JS 332 байт [встроенный] | ./src/painters/event_color.js 374 байт [встроенный] | ./src/painters/range_color.js 591 байт [встроенный] | ./src/views/empty_day_cell_content.jsx 340 байт [встроенный] | + 38 скрытые модули + 743 скрытые модули
Xero
1

голосов
2

ответ
135

Просмотры

Docker дизайн для нескольких приложений [закрыт]

Что такое хороший дизайн, когда у вас есть несколько приложений? Поэтому в основном я dockerized приложения среагировать и nodejs приложения. Так что моя идея состоит в том, чтобы иметь 3 Docker контейнеров - один для реакции приложения, один для nodejs бэкэнда и Nginx в качестве маршрутизатора. Любой вызов с / перенаправит реагировать приложение и все, что с / АНП маршрут к nodejs бэкенд. Кроме того, для среагировать приложения, в процесс разработки мы будем запускать приложение с началом НПМ запуска и во время развертывания мы будем иметь несколько шага сборки, где мы будем работать НУЮ сборку запуска и скопировать папку сборки на Nginx изображение. Я использую Docker Compose запустить их на моем местное время как разработчик, а также на серверах QA / этапе. Идея имея Nginx маршрутизатор должен был разрешить прокси-сервер для различных приложений из любого приложения. Таким образом, я хочу, чтобы поощрить команду следовать постное achitecture. Чтобы понять конструкцию, см ниже: DEV СРЕДЫ - -> "
bhb
1

голосов
1

ответ
51

Просмотры

Как реорганизовать Реагировать код включать меньше «this.state»

У меня есть класс в React проекта с 2 сохраненных состояний: импорт SoundData из «./sounds.json»; Класс SoundReading расширяет React.Component {состояние = {данные: SoundData.sounds, индекс: 0} ...} В остальной части моего кода, я постоянно называя «this.state.data ...» и «это. state.index. Я знаю, что мы можем удалить «this.state» внутри сопзИте, включив проп имени (ы) в качестве параметра, завернутого в фигурных скобках. Const SongDetail = ({песня}) => {...} Но в этой ситуации, я потянув эти данные непосредственно из JSON в компонент, я работаю. Как я могу реорганизовать свой код, так что я не» т приходится постоянно писать и читать «this.state»?
Matt Brody
1

голосов
2

ответ
30

Просмотры

Передача нового состояния детского компонента в React

Я подключил Главная компонента реквизита методом действия и направить редуктор успешно. Все, кажется, работает хорошо, я могу видеть данные Api подходит к редуктору в консоли. Проблема в том, реагирует не пересборку ProfileGroupsWidget. this.props.user всегда {} в этом детском компоненте, я ожидал, что это будет {имя: "John Doe"} Вот userReducer, "GET_AUTH_USER_SUCCESS" происходит от getAuthenticatedUser: Const InitialState = {}; Const userReducer = (состояние = InitialState, действие) => {переключатель (action.type) {случай 'GET_AUTH_USER_SUCCESS': console.log ( 'Вывод:', action.user); // {имя: "Джон Доу"} состояние = action.user парадная; по умолчанию: парадная}} экспорт {userReducer} Главная моя Главная составляющая: импорт React, {Компонент} от «реагируют»; импорта ProfileGroupsWidget от импорта»./Widgets/ProfileGroupsWidget.js' {} соединить с 'реагируют-Redux' импорта {} UserActions от "../_actions/userActions"; Класс Home расширяет компонент {конструктора (реквизит) {супер (реквизит); this.state = {пользователь: this.props.user} this.props.getAuthenticatedUser (); } Визуализации () {возвращение ()}} Const mapStateToProps = состояние => {вернуть состояние} функция mapDispatchToProps (отправка) {возвращение {getAuthenticatedUser: () => {отправка (userActions.getAuthenticatedUser ())}}} // Connect Home компонент реквизит с хранением данных: экспорт по умолчанию подключается (mapStateToProps, mapDispatchToProps) (Home); /Widgets/ProfileGroupsWidget.js' импорта {} соединиться с 'реагируют-Redux' импорта {} UserActions от "../_actions/userActions"; Класс Home расширяет компонент {конструктора (реквизит) {супер (реквизит); this.state = {пользователь: this.props.user} this.props.getAuthenticatedUser (); } Визуализации () {возвращение ()}} Const mapStateToProps = состояние => {вернуть состояние} функция mapDispatchToProps (отправка) {возвращение {getAuthenticatedUser: () => {отправка (userActions.getAuthenticatedUser ())}}} // Connect Home компонент реквизит с хранением данных: экспорт по умолчанию подключается (mapStateToProps, mapDispatchToProps) (Home); /Widgets/ProfileGroupsWidget.js' импорта {} соединиться с 'реагируют-Redux' импорта {} UserActions от "../_actions/userActions"; Класс Home расширяет компонент {конструктора (реквизит) {супер (реквизит); this.state = {пользователь: this.props.user} this.props.getAuthenticatedUser (); } Визуализации () {возвращение ()}} Const mapStateToProps = состояние => {вернуть состояние} функция mapDispatchToProps (отправка) {возвращение {getAuthenticatedUser: () => {отправка (userActions.getAuthenticatedUser ())}}} // Connect Home компонент реквизит с хранением данных: экспорт по умолчанию подключается (mapStateToProps, mapDispatchToProps) (Home);
tolga
1

голосов
2

ответ
38

Просмотры

почему мой реагировать Js кнопку щелчок события не работает

Я учусь React.js и запутался код ниже: btnClick () {возвращение (Нажмите меня)} визуализации () {возвращение ({this.btnClick ()})} предупреждение только получить приглашение после обновления каждый раз, но не при нажатии кнопки. Зачем?
Jingwei
1

голосов
2

ответ
46

Просмотры

странный вопрос о shouldComponentUpdate ()

Я не понимаю, как метод shouldComponentUpdate () имеет доступ к старому состоянию, Как я знаю, shouldComponentUpdate () вызывается после реквизита или изменения состояния. Предположим, что вы называете SetState (), после того, что текущее состояние будет изменено и будет обновление с новым государством. Но shouldComponentUpdate () вызывается даже после обновления состояния до последней версии. Поэтому, как можно «this.state» внутри shouldComponentUpdate () возвращают старое состояние? shouldComponentUpdate (nextProps, nextState) {console.log (this.state); // как это может быть старое состояние? } Кто-нибудь получить представление? Большое спасибо.
dmcshehan
1

голосов
1

ответ
24

Просмотры

How to iterate through array of objects and execute a request using react?

я должен выполнить запрос для каждого объекта в пределах данных. Данных содержит подробную информацию о элементах с каждым элементом выделяясь с идентификатором и, как в data_to_loop переменной, пусть data_to_loop = [{атрибуты: {после: {...} до {...},} ID: 71 read_status: "непрочитанные"} {атрибуты: {после: {...} до {...}} идентификатор: 70 read_status: "непрочитанные"},. , ...... так далее ,,,] Таким образом, приведенные выше данные могут иметь любое количество элементов. поэтому следует перебирать каждый элемент и выполнить запрос поста на нем. Запрос, как показано ниже, в файле клиента функции экспорта clear_item (идентификатор, отмена) {возвращение пост ( `элементы / $ {ID} / clear`, отмена); } Я пытался что-то, как показано ниже, client.clear_item ('72' ) .then ((запрос) => {console.log ( "запрос OnClear", запрос);}); Выше закодирована с идентификатором элемента. это очищает этот конкретный пункт. Как я могу это сделать для всех элементов в data_to_loop вар. Может кто-нибудь помочь мне с этим. Благодарю.
niina
0

голосов
0

ответ
13

Просмотры

не Window.alert реализованы при выполнении тестов

Я пытаюсь экспериментировать некоторые с шуткой тестером реагировать и когда я делаю тест НОГО, тест проходит нормально, но я получаю эту ошибку: Фотосъёмка: 0 всех console.error node_modules / jsdom / Библиотека / jsdom / виртуальная консоль. JS: 29 Ошибка: не реализовано: window.alert Я знаю, что это связано с тем, что я аварийный вызов в моем коде, потому что, если я комментировать, сообщающие вызов, что я не получаю сообщение об ошибке. Я попробовал решение упомянутых здесь, но я все еще получаю ошибку. Есть ли способ, что я могу устранить эту ошибку, в то же время сохраняя аварийный вызов в моем коде? Вот тест: он ( 'оказывает без сбоев', () => {jest.spyOn (окно, 'тревога') mockImplementation (() => {}); Const деления = document.createElement ( 'DIV');. ReactDOM.render (, дела); ReactDOM.unmountComponentAtNode (дела);});
dcp
0

голосов
0

ответ
75

Просмотры

AWS Amplify Connect не возвращает данные

У меня есть очень простой сервер GraphQL, который возвращает «Hello World», если запрашиваются с {} Привет Я настроен Amplify с конечной точкой GraphQL и области и проверить, что соединение работает с этим сниппет: ** ЭТО РАБОТАЕТ ** импорт {API , graphqlOperation} от 'AWS-амплификации' константные ListEvents = `запроса {Привет}` асинхронной getNote () {попытаться {Const результат = ждут API.graphql (graphqlOperation (ListEvents)) console.log (результат)} поймать (е) { console.log ( "Невозможно получить привет") console.log (e.response)}} ВОЗВРАТ: { "данные": { "привет": "Привет, мир!" }} Моя проблема Я хочу использовать соединение с AWS-амплификации реагируют, как описано здесь, я использовал следующий кусок кода и включить его в возвращении моего приложения: ** ЭТО НЕ РАБОТАЕТ ** импорт {Connect} из «АМС-амплификации реагировать»; константное ListEvents = `запроса {Привет}` {(объект, ... остальное) => {console.log (объект); console.log (остальное); }} Это ВОЗВРАТ: Причина для двух пустых ответов обсуждаются в другом переполнением стека вопрос, но это просто никогда не возвращает ожидаемые данные. Можете ли вы помочь мне понять это?
Attaque
1

голосов
3

ответ
88

Просмотры

Force пузыря события OnChange входного к родительской форме с значением, хранящимся в состоянии

ИЗМЕНИТЬ К сожалению для показа неправильного использования регистра. Все входы внутри формы в настоящее время пропускают через this.props.children, и они могут быть расположены в любой глубокой точке дерева компонентов, поэтому подход прохождения handleChange непосредственно на входы не будет работать. Вот фрагмент кода с воспроизведением проблемы. Класс CustomSelect расширяет React.Component {товара = [{ID: 1, текст: "Каппа 1"}, {ID: 2, текст: "Каппа 2"}, {ID: 3, текст: "Каппа 3"}] состояние = {выбрана: нулевая,} handleSelect = (п) => {this.setState ({выбран: пункт})} визуализации () {вар {} выбрано = this.state возврата ({}} /> Выбранные: {выбран? selected.text: "ничего"} {this.items.map (пункт => {Возвращение (this.handleSelect (пункт)}> {item.text})})})}} Класс Form расширяет React.Component {handleChange = (событие) => {console.log ( "Форма OnChange")} визуализации ( ) {возвращение ({this.props.children})}} ReactDOM.render (Этот вход будет вызывать OnChange события формы, в document.getElementById ( «__ корень»)) Как вы можете видеть, когда вы вводите что-то вход по умолчанию (или контролируемому неконтролируемые, что угодно), форма уловы ого OnChange события. Но когда вы устанавливаете значение входа программно (с государством, в данном случае), то событие OnChange не быть вызвано, поэтому я не могу поймать эти изменения внутри OnChange формы. Есть ли какие-либо варианты, чтобы побить эту проблему? Я попытался input.dispatchEvent (новое событие ( «изменение», {пузырями: истинно})) сразу же после того, как SetState ({отмеченными: вход}), так и внутри его обратного вызова, но нет результата.
1

голосов
2

ответ
432

Просмотры

Реагировать Router Link с PARAMS не перезагрузки страницы с новыми данными componentDidMount и Redux AXIOS выборки данных

У меня есть это реагировать + Redux приложения у меня есть 1 Movie компонента с некоторыми данными фильмов, отображаемых на нем, которые извлекаются из API. Таким образом, в нижней части, я решил добавить Похожие фильмы раздел с несколькими компонентами, чтобы перейти к новым страницам фильмов. {This.props.thisMovieIdDataSIMILAR.slice (0,4) .map ((фильм, индекс) => {возвращение ()})} Теперь, когда я в корневом пути для экземпляра / Обсуждаемая и я нажимаю на аи получить навигацию, для конкретного маршрута (например, / кино / 234525) и все работает отлично, но если я в / кино / {некоторый шаг ID} маршрут и я нажимаю на какой маршрут в строке URL обновляется, но остается страницы еще, не означает ничего изменится, если я перезагрузить страницу с новым маршрутом отображается новые данные movieID ... это мой App.js} /> и componentDdidMount из Movie.jsx компонентов ... componentDidMount () {window.scroll ( 0, 0); this.movieID = ParseInt (window.location.href.split ( "/") [window.location.href.split ( "/") Длина-1.]); this.props.getMovieInfo (this.movieID); this.props.getMovie_YOUTUBE (this.movieID); this.props.getMovie_SIMILAR (this.movieID); } ... Так как я могу сделать навигацию к новому / кино / {movieID} FOMR а / фильм / {movieID}? .. componentDidMount () {window.scroll (0, 0); this.movieID = ParseInt (window.location.href.split ( "/") [window.location.href.split ( "/") Длина-1.]); this.props.getMovieInfo (this.movieID); this.props.getMovie_YOUTUBE (this.movieID); this.props.getMovie_SIMILAR (this.movieID); } ... Так как я могу сделать навигацию к новому / кино / {movieID} FOMR а / фильм / {movieID}? .. componentDidMount () {window.scroll (0, 0); this.movieID = ParseInt (window.location.href.split ( "/") [window.location.href.split ( "/") Длина-1.]); this.props.getMovieInfo (this.movieID); this.props.getMovie_YOUTUBE (this.movieID); this.props.getMovie_SIMILAR (this.movieID); } ... Так как я могу сделать навигацию к новому / кино / {movieID} FOMR а / фильм / {movieID}?
1

голосов
0

ответ
53

Просмотры

Как обновить состояния вне класса среагировать?

У меня есть класс реагирует с некоторыми начальными состояниями. пусть SubjectList = createReactClass ({getInitialState: функция () {возвращение {предметы: [ 'Математика', 'Наука', 'История']}}, У меня есть функция, чтобы обновить предметную массив следующим образом: addSubject: функция (Subjectname) {если (Subjectname == '') {пусть подсписок = this.state.subjects; subList.push (Subjectname); this.setState ({предметы: подсписок});}}, Как я должен получить доступ к этой функции ? из-за пределы этого класса я работаю в электроне и я попытался это: ipcRenderer.on ( 'надстройка нового объекта съемки', (событие, newSubjectName) => {SubjectList.addSubject (newSubjectName);}); Но это не работает. Я хочу, чтобы обновить массив объектов через эту функцию.
PiyushPawar
1

голосов
0

ответ
881

Просмотры

Создание идентификаторов для React компонентов для Selenium тестов

Я хотел бы генерировать идентификаторы для почти каждого элемента в моем веб-сайте, чтобы иметь более легкую обработку элементов для Selenium тестов времени. Это хороший подход? Мое приложение изменяет совсем немного. Я не могу добавить атрибут ID HTML в React компоненту, потому что React интерпретирует его как реквизит например ... и Нюэл получает идентификационный реквизит вместо атрибута. Иногда я не могу получить доступ к React компонента, потому что я использую компоненты сторонних. Как я должен изменить этот идентификатор атрибута? Является ли мой подход хорошим решением?
Patryk Janik
1

голосов
1

ответ
58

Просмотры

Что такое правильный подход для хранения и доступа к данным таблицы в магазине Redux

Я очень новой для ReactJS и Redux (но не развития, в целом). Я пытаюсь определить, как лучше подойти к SPA Я здание. Мое приложение будет загружать наборы данных через API и отображать их в таблице. Я хотел бы использовать Redux для хранения данных. Это правильный подход? Мы могли бы потенциально быть глядя на очень больших наборов данных. Было бы более целесообразно хранить только те данные, которые в настоящее время оказываемых в электронной таблице? Я полностью потерял, как к подходу, который был бы эффективным с точки зрения скорости рендеринга и управления памятью, а также помнить о возможных проблемах сети, как ряды данных запрашиваются из API. Спасибо...
UnifiedEntity

Просмотр дополнительных вопросов