#javascript #reactjs #react-hooks #react-props #spread-syntax
Вопрос:
Я передаю props.key и props.expansion, типами данных которых являются строка и объект соответственно.
В операторе if механизм JS выдает ошибку для второго аргумента, следующего за операторами распространения(props.key: true), с сообщением об ошибке, в котором говорится, что требуется запятая. Я не вижу никакой ошибки в коде.
Пожалуйста, укажите и предложите решение для аргументов(особенно второго аргумента) props.selectExpansion в операторах if.
const Expansion = (props) =gt; { return ( // unique props.key is the expansion name lt;div className={props.key} onClick={() =gt; { // only alters the expansionList state by changing the expansion name corresponding to props.key // change the boolean value of expansion on expansionList if(!props.expansion[props.key]) { props.selectExpansion(...props.expansion, props.key: true) } else { props.selectExpansion(...props.expansion, props.key: false) } }}gt; lt;h1gt;Expansionlt;/h1gt; lt;/divgt; ); } export default Expansion; Комментарии:
1. Я думаю, что вы должны передать объект в качестве второго аргумента, но вы передаете его напрямую. Заверните его в фигурные скобки. {[реквизит.ключ]: верно}
2. Привет, я намерен установить состояние с помощью selectExpansion. Состояние имеет 24 пары ключ/значение, поэтому я использую синтаксис распространения. Затем я использую props.key:true (или false), чтобы изменить только одну пару ключ/значение. Это не работает. обновление) ваше решение сработало!
3. Вы уверены
props.key, что он вообще доступен в компоненте? У React есть пара очень специальных реквизитов,key, иref, которые не передаются дочерним компонентам. Другими словами, они недоступны из дочернего компонента. Еслиprops.keyон каким-то образом доступен, вам нужно передать объект сprops.keyименем динамического свойства, т. Е.props.selectExpansion({ ...props.expansion, [props.key]: true }).4. @DrewReese Мне определенно придется проверить это тоже после того, как я решу эту проблему. Спасибо, что указали; вы спасли меня от вопроса
Ответ №1:
Трудно сказать, в чем props.expansion дело, в любом случае, если вы хотите что-то изменить внутри этого объекта, код может быть изменен на следующий:
// change the boolean value of expansion on expansionList if(!props.expansion[props.key]) { props.selectExpansion({...props.expansion, [props.key]: true}) } else { props.selectExpansion({...props.expansion, [props.key]: false}) } Ответ №2:
Для лучшего понимания, я думаю, нам нужно увидеть родительский компонент, но я думаю, что вы пытаетесь установить состояние, как оно есть, только с обновленным значением ключа. Следовательно, вам нужно обернуть параметры в объект.
const Expansion = (props) =gt; { return ( // unique props.key is the expansion name lt;div className={props.key} onClick={() =gt; { // only alters the expansionList state by changing the expansion name corresponding to props.key // change the boolean value of expansion on expansionList if(!props.expansion[props.key]) { props.selectExpansion({...props.expansion, props.key: true}) } else { props.selectExpansion({...props.expansion, props.key: false}) } }}gt; lt;h1gt;Expansionlt;/h1gt; lt;/divgt; ); } export default Expansion; Видите, я использовал это
props.selectExpansion({...props.expansion, props.key: true}) Вместо
props.selectExpansion(...props.expansion, props.key: true) Ранее вы передавали 2 параметра функции setState(selectExpansion).
Комментарии:
1. очень глупую ошибку я совершил, спасибо!
2. Кроме того, является ли этот ключевой атрибут частью реквизита react или отдельным атрибутом? Можете ли вы получить к нему доступ? Это все еще может не сработать. Вам придется сделать что-то вроде props.selectExpansion({…props.расширение, [props.ключ]: true}). Только в том случае, если ключ доступен, а не опора для реакции.