У меня children - это массив с одним элементом

У меня children - это массив с одним элементом

други, подскажите почему филд финал форм не рендерится <Field name="serviceType" component={InputSelect} options={this.props.arbitraryServicesOptions} onChange={this.onServiceTypeChange} />

import React, {PureComponent} from 'react' import {change, WrappedFieldProps} from 'redux-form' import {InjectedIntlProps} from 'react-intl' import Select from 'react-select' import {OptionsType} from 'react-select/lib/types' import {Text} from 'appComponents' import {showWarning} from 'utilities' export type SelectOption<E = {id: number}> = E & {label: string, value: string | number} export type SelectOptions<O = {}> = OptionsType<SelectOption<O>> type Props = WrappedFieldProps & InjectedIntlProps & { defaultValue: SelectOption, className: string, required: boolean, isDisabled: boolean, htmlFor: string, label: string, autoFocus: boolean, options: SelectOptions, placeholder?: string, localize?: boolean, isSearchable?: boolean, onChange: (value: SelectOption) => void } export class InputSelect extends PureComponent<Props, {}> { componentWillUnmount() { if (this.props.meta && this.props.meta.dispatch) { this.props.meta.dispatch(change(this.props.meta.form, this.props.input.name,null)) } } componentWillReceiveProps(nextProps: Props) { if (!this.props.defaultValue && nextProps.defaultValue && nextProps.defaultValue.value) { this.onChange(nextProps.defaultValue) } } componentDidMount() { if (this.props.defaultValue) { this.onChange(this.props.defaultValue) } } onChange = (value: SelectOption) => { const {input, onChange} = this.props if (input) { input.onChange(value) input.onBlur(value) } if (onChange) { onChange(value) } } checkValue = () => { const {localize, input} = this.props if (localize && (input && input.value)) { return { ...input.value, label: <Text text={input.value.label} type="bare"/>, value: input.value.value } } else if (input && input.value) { return input.value } else { return } } select = (classNames: string) => { const {placeholder = 'select', autoFocus, options, localize} = this.props return ( <Select {...this.props} menuRenderer={() => showWarning('No menuRenderer handler in InputSelect')} placeholder={placeholder && ((<Text text={placeholder} type="bare" /> as unknown) as string)} classNamePrefix={classNames} autoFocus={autoFocus} options={options.map(option => ({ ...option, label: localize ? <Text text={option.label} type="bare"/> : option.label, value: option.value }))} value={this.checkValue()} // @ts-ignore onChange={this.onChange} noOptionsMessage={() => (<Text text="noData" type="bare"/> as unknown) as string} /> ) } input = () => { const {className, meta, required, input, isDisabled} = this.props let classNames = className ? ${className} react-select : 'react-select' // подсказка ошибок if (meta && meta.error && meta.touched) { classNames += ' validation__select-error' } return input ? ( <div className={form__validation${isDisabled ? ' disabled' : ''}}> {this.select(classNames)} {required && !meta.touched ? <div className="validation__input-required"/> : null} </div> ) : this.select(classNames) } render() { const {htmlFor, input, label} = this.props return label ? ( <div className="form__label"> <label htmlFor={htmlFor || input.name}> {<Text text={label} type="label"/>} </label> {this.input()} </div> ) : ( this.input() ) } }

import React, {PureComponent} from 'react' import {change, WrappedFieldProps} from 'redux-form' import {InjectedIntlProps} from 'react-intl' import Select from 'react-select' import {OptionsType} from 'react-select/lib/types' import {Text} from 'appComponents' import {showWarning} from 'utilities' export type SelectOption<E = {id: number}> = E & {label: string, value: string | number} export type SelectOptions<O = {}> = OptionsType<SelectOption<O>> type Props = WrappedFieldProps & InjectedIntlProps & { defaultValue: SelectOption, className: string, required: boolean, isDisabled: boolean, htmlFor: string, label: string, autoFocus: boolean, options: SelectOptions, placeholder?: string, localize?: boolean, isSearchable?: boolean, onChange: (value: SelectOption) => void } export class InputSelect extends PureComponent<Props, {}> { componentWillUnmount() { if (this.props.meta && this.props.meta.dispatch) { this.props.meta.dispatch(change(this.props.meta.form, this.props.input.name,null)) } } componentWillReceiveProps(nextProps: Props) { if (!this.props.defaultValue && nextProps.defaultValue && nextProps.defaultValue.value) { this.onChange(nextProps.defaultValue) } } componentDidMount() { if (this.props.defaultValue) { this.onChange(this.props.defaultValue) } } onChange = (value: SelectOption) => { const {input, onChange} = this.props if (input) { input.onChange(value) input.onBlur(value) } if (onChange) { onChange(value) } } checkValue = () => { const {localize, input} = this.props if (localize && (input && input.value)) { return { ...input.value, label: <Text text={input.value.label} type="bare"/>, value: input.value.value } } else if (input && input.value) { return input.value } else { return } } select = (classNames: string) => { const {placeholder = 'select', autoFocus, options, localize} = this.props return ( <Select {...this.props} menuRenderer={() => showWarning('No menuRenderer handler in InputSelect')} placeholder={placeholder && ((<Text text={placeholder} type="bare" /> as unknown) as string)} classNamePrefix={classNames} autoFocus={autoFocus} options={options.map(option => ({ ...option, label: localize ? <Text text={option.label} type="bare"/> : option.label, value: option.value }))} value={this.checkValue()} // @ts-ignore onChange={this.onChange} noOptionsMessage={() => (<Text text="noData" type="bare"/> as unknown) as string} /> ) } input = () => { const {className, meta, required, input, isDisabled} = this.props let classNames = className ? ${className} react-select : 'react-select' // подсказка ошибок if (meta && meta.error && meta.touched) { classNames += ' validation__select-error' } return input ? ( <div className={form__validation${isDisabled ? ' disabled' : ''}}> {this.select(classNames)} {required && !meta.touched ? <div className="validation__input-required"/> : null} </div> ) : this.select(classNames) } render() { const {htmlFor, input, label} = this.props return label ? ( <div className="form__label"> <label htmlFor={htmlFor || input.name}> {<Text text={label} type="label"/>} </label> {this.input()} </div> ) : ( this.input() ) } }

а длиннее портянку можно было?

Одного потомка я передаю

так что, обернут он во фрагмент или нет?

нет

Ребят кто скажет, влияет ли на производительность если state обновляется каждую секунду и это не заканчивается, пока пользователь не нажал на кнопку?

Я слышал reselect решает вопрос, это так?

Ребят кто скажет, влияет ли на производительность если state обновляется каждую секунду и это не заканчивается, пока пользователь не нажал на кнопку?

если у тебя от этого стейта малая часть приложения ререндерится - то нет(считай, что нет), если большая - то да

А что делать в таком случае?

Не делать так чтобы стейт обновлялся каждую секунду пока пользователь не нажмёт на кнопку

если у тебя от этого стейта малая часть приложения ререндерится - то нет(считай, что нет), если большая - то да

Меняется один компонент

Меняется один компонент

Меняется один компонент

да как обычно

Че там именно в стейте меняется каждую секунду то?

у меня было такое, кажется решилось обновлением пакетов

Меняется счетчик каждую секунду --

Так ты потестируй Если все лагает то ищи другой путь Если все норм то жди когда начнет лагать

То есть тебе что надо посчитать сколько времени пройдёт с момента маунта компонента и до того как пользователь нажмёт кнопку?

Как вы экспортируете законекченные компоненты? const App = () => {} export default connect(App)

Ребят, не подскажете, почему когда меняю название в, например: — Button —Button.js на index.js в import добавляется './node_modules/react';

"javascript.updateImportsOnFileMove.enabled": "never"

А что вы про стенсил думаете?

ssr есть? Декларативность есть?

ещё бы денег не просил :)

Ну ты посмотрел?)

Блин не увидел, но так то пох

Господа, подскажите в каком случае надо использовать setState в виде функции?

в плане?

что «в плане?»? что за вопрос?

в аргумент можно функцию передавать

setState(state => state) так?

+