元素隐式具有“任何”类型，因为“任何”类型的表达式不能用于索引类型“{服务：字符串； }

Question

const [serviceList, setServiceList] = useState([{ service: '' }]);

const handleServiceChange = (e:any, index: any) => {
        const { name, value } = e.target;
        const list = { ...serviceList };
        list[index][name] = value;//getting the error here
        setServiceList(list);
    }

This error appears can anyone help me understand the issue and tell me how to solve this in typescript?

Answer 1

You get this error because name can be anything, but elements in your list only have property service . So nothing can guarantee that name value is actually "service" . In general, you should try to avoid using any to type your variables.

Check the following code. I have used ChangeEvent<HTMLInputElement> as an example, but in your case in might be different. In any case, doing this makes typescript know that name is a string.

const handleServiceChange = (e: ChangeEvent<HTMLInputElement>, index: number) => {
  const {name, value} = e.target

  // NOTE the syntax to copy an array!!
  const list = [...serviceList];

  // TS knows that `name` is a string, but it can still be any string.
  // This ensures we only continue if `name === 'service'` and thus makes the error go away
  if (name !== 'service') return;

  list[index][name] = value; // Now we are sure that name == "service"
  setServiceList(list);
}