#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,
}
И я сохраняю поле статуса в самом объекте.