Как установить исходное состояние в React Hooks - PullRequest
Новая
       13

Как установить исходное состояние в React Hooks

0 голосов
/ 13 мая 2019

У меня есть массив, который создает сопоставление элементов с флажками.каждый элемент имеет проверенное состояние: 

const [checked, setChcked] = React.useState(false)

Таким образом, пользователь проверяет, скажем, 5 из 20 флажков, а затем нажимает кнопку (кнопка находится в более высоком компоненте, где есть сопоставление, которое создает эти элементыс флажками) и работает как задумано.Но после того, как кнопка нажата, и модальное окно закрывается, после того, как я снова открываю модальное, эти 5 флажков все еще проверены.Я хочу, чтобы они перезагружались, чтобы их не проверяли, как когда я обновляюсь и состояние исчезает.Теперь я знаю такие методы, как не сохранение состояния для каждого элемента и просто сохранение состояния массива элементов в более высоком компоненте, но я смущен, так как слышал, что хуки были созданы, так что это хорошая практика - когда-нибудь сохранитьсостояние в немых компонентах.

Есть ли более простая функция, чтобы просто перезапустить до начального значения?

Редактировать: добавить код 

           <div>
            {policyVersionItems.map(item=> (
              <PolicyVersionItem
                key={pv.version}
                policyVersionNumber={item.version}
                policyVersionId={item._id}
                handleCheck={handleCheck}
              >
                {' '}
              </PolicyVersionItem>
            ))}
          </div>

И элемент 

const PolicyVersionItem: React.FunctionComponent<PolicyVersionItemProps> = props => {
const { , policyVersionNumber, policyVersionId, handleCheck } = props
const [checked, setChcked] = React.useState(false)
return (
    <Wrapper>
        <Label dark={isEnabled}> Version {policyVersionNumber}</Label>
            <Checkbox
                checked={checked}
                onClick={() => {
                    if (isEnabled || checked) {
                        setChcked(!checked)
                        handleCheck(policyVersionId, !checked)
                    }
                }}
            />
    </Wrapper>
)

}

Некоторые из них не имеют отношения к делу.функция проверки дескриптора - это функция, которая, например, возвращает данные в верхний компонент из нижнего компонента.

...