Передать строковое значение как объект компоненту Redux с PropTypes в React

Компонент, использующий пример Redux из Окончательная форма React была создана в index.js.

<FormStateFromRedux valueName="valueString" form="counter" />

Он использует избыточность для отслеживания значений, используя prop-types, он должен получить имя объекта, чтобы вернуть точное значение объекта:

const FormStateFromRedux = ({ state, valueName }) => (
  <p>{state.values.valueName}</p>
)

export default connect((state, ownProps) => ({
  state: getFormState(state, ownProps.form)
}))(FormStateFromRedux)

 FormStateFromRedux.propTypes = {
  valueName: PropTypes.objectOf(PropTypes.string)
};

Можно вернуть значение, когда путь к объекту задан вручную, здесь я хочу сделать повторно используемый компонент для возврата значений с использованием PropTypes, но не знаю, какой тип выбрать. Можно ли передать значение в виде строки? Может кто-нибудь знает, какой должен быть правильный подход в этом случае?

ОБНОВЛЕНИЕ

Можно получить строковое значение внутри объекта, используя []

const FormStateFromRedux = ({ state, valueName }) => ( <p>{state.values[valueName]}</p> )


reactjs javascript react-redux redux-form react-final-form
person o.O    schedule 10.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам следует избегать передачи всего состояния формы компоненту. Компонент должен иметь только необходимые реквизиты.

const FormStateFromRedux = ({ valueName }) => ( <p>{valueName}</p> );

export default connect((state, props) => {
  const formState = getFormState(state, props.form);
  const { value : { valueName } } = formState;
  return { valueName };
})(FormStateFromRedux);

FormStateFromRedux.propTypes = {
  valueName: PropTypes.string
};
person Rushikesh Bharad    schedule 10.04.2018
comment
Большое спасибо за вашу помощь, я попробовал ваше решение, но получил ошибку: Module build failed: /src/Components/FormStateFromRedux.js: Duplicate declaration "state" Можете ли вы узнать, в чем может быть проблема? - person o.O; 10.04.2018
comment
Виноват. Я обновил решение. Пожалуйста, дайте мне знать, если это работает сейчас - person Rushikesh Bharad; 10.04.2018
comment
Изменено `const { value : {valueName } } = formState;` на `const { valueS : {valueName } } = formState;` для его компиляции. Тем не менее он возвращает пустой <p></p> в DOM - person o.O; 10.04.2018
comment
Пожалуйста, попробуйте добавить console.log() для значения и значения valueName, прежде чем возвращать его как реквизит. Вы также можете попробовать распечатать состояние, чтобы узнать, чего не хватает. - person Rushikesh Bharad; 10.04.2018
comment
Кажется, что valueName возвращается как undefined. - person o.O; 10.04.2018
comment
Ну вот. значение, похоже, не содержит valueName. Зарегистрируйте значение и получите правильный ключ, который вы хотите получить в DOM под тегом ‹p›. :) - person Rushikesh Bharad; 10.04.2018
comment
Уже попробовал const result = formState.values.valueName=this.props; и const { values : { valueName = this.props} } = formState;, но все еще получаю undefined - person o.O; 10.04.2018
comment
Кажется, что const { values : { [${'string'}]:val } } = formState; возвращает значение, но когда часть "String" изменяется на valueName, возвращается ошибка: 'valueName' is not defined no-undef. Также const FormStateFromRedux = ({ valueName }) => ( <p>{valueName}</p> ); печатает ввод строки из index.js, когда она не используется в export default connect((state, props) => {...}) - person o.O; 11.04.2018