Блог

Главная - Вопросы по программированию - Не удается получить доступ к значению состояния с помощью динамического ключа в react typescript

Не удается получить доступ к значению состояния с помощью динамического ключа в react typescript

#reactjs #react-hooks #react-typescript

Вопрос:

     let [radioData, setRadioData] = React.useState({
      ActivityStatus: {
        Active: true,
        Inactive: false,
        Completed: false,
      },
      Other: {}
    })

    let options = [{ "label": "Active" }, { "label": "Inactive" }, { "label": "Completed" }]
    return (
      <div className="App">
        {options.map((item, index) => {
          return (
            <FormControlLabel
              control={
                <Checkbox
                  checked={radioData.ActivityStatus[item.label]}
                  name="gilad" />
              }
              label={item.label}
            />
          )
        })}
      </div>
    );

Я получаю следующую ошибку, если пытаюсь получить доступ к проверенным значениям

Элемент неявно имеет тип «любой», поскольку выражение типа «строка» не может использоваться для индексирования типа » {Активный: логический; Неактивный: логический; Завершен: логический; }». Подпись индекса с параметром типа «строка» не была найдена для типа » {Активный: логический; Неактивный: логический; Завершен: логический; }».

Комментарии:

1. возможно, вы попытаетесь удалить двойные кавычки из параметров ключей

2. @NaolChala попробовала, все то же самое

3. или попробуйте добавить двойные кавычки к ключам radioData, я не знаю, работает ли это, но попробуйте

Ответ №1:

Вы должны определить string тип для ключей объекта следующим образом:

     import "./styles.css";
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import React from 'react';
export default function App() {
  let [radioData, setRadioData] = React.useState<{[key:string]: boolean | any}>({
    ActivityStatus: {
      "Active": true,
      "Inactive": false,
      "Completed": false,
    },
    Other: {}
  })

  let options = [{ "label": "Active" }, { "label": "Inactive" }, { "label": "Completed" }]
  return (
    <div className="App">
      {options.map((item, index) => {
        return (
          <FormControlLabel
          control={
            <Checkbox
              checked={radioData.ActivityStatus[item.label]}
              name="gilad"
              onChange={() => 
                {
                  setRadioData({...radioData,
                     ActivityStatus: 
                     {...radioData.ActivityStatus,
                       [item.label]: !radioData.ActivityStatus[item.label]}})
                      }
                    } />
          }
          label={item.label}
        />
        )
      })}
    </div>
  );
}

Проверьте, работает ли он здесь.

Комментарии:

1. Как установить состояние при изменении, если я обновляю одно значение в состоянии активности

2. Я обновил ответ и песочницу. Пожалуйста, проверьте это.

Ответ №2:

Вам не нужно иметь объект ActivityStatus в качестве состояния реакции, так как он кажется постоянным. Вместо этого удерживайте ключ состояния в своих объектах по мере необходимости, и пусть ActivityStatus будет постоянным окончательным словарем. Я создал пример codesandbox с минимальной повторяемой подобной проблемой. Взгляните на это.

В основном у меня есть:

 const ActivityStatus =  {
  Active : true,
  Inactive : false,
  Completed : false,
}

И я сохраняю поле статуса в самом объекте.

Метки: