Reactjs Typescript：如何在解构散列时使用符号作为键 键入UseStateTuple=[T，React.Dispatch] const StoreContext=createContext（null） 接口晶体管{ 人物：UseStateTuple //IStore可能有其他useState元组 //posts：例如使用statetuple } 界面道具{ type:string//这是指向useState元组的键 description:string//忽略此项 } export const AddPerson:React.FC=（{type，description}）=>{ 常量[input，setInput]=useState（“”） //useContext（StoreContext）返回一个我想要解构的IStore对象。 //在这个上下文中（没有双关语）“[type]：”应该被评估为“people:”，对吗？ // //我可以使用： //“{人}” // //而不是 //“[类型]：[数据，设置数据]” // //这很有效，为什么？ const{[type]：[data，setData]}=useContext（StoreContext）！ /* //这段代码运行良好。 const{people}=useContext（StoreContext）！ const[data，setData]=人 */ //功能继续。。。。 } ///JSX . 我试着把所有相关的代码都放在这篇文章里。

你可能需要

界面道具{
type:keyof istor//这是指向useState元组的键
description:string//忽略此项
}

您可能需要

界面道具{
type:keyof istor//这是指向useState元组的键
description:string//忽略此项
}

通常要使用索引，索引表达式必须是

keyof T

类型，其中

T

是您要索引的任何类型。或者换句话说，索引表达式必须证明作为

T

的索引是有效的

如果将

类型

更改为

IStore键

，它将工作：

import React, { createContext, useState, useContext } from 'react'

type UseStateTuple<T> = [T, React.Dispatch<React.SetStateAction<T>>]
const StoreContext = createContext<IStore | null>(null)
interface IStore {
  people: UseStateTuple<string[]>
  // IStore could potentially have other useState tuples. Something like
  // posts: UseStateTuple<IPost[]>
}

interface Props {
  type: keyof IStore        
  description: string 
}

export const AddPerson: React.FC<Props> = ({type, description}) => {
  const [input, setInput] = useState('')

  const { [type]: [data, setData] } = useContext(StoreContext)!

  return <div></div>
}

let d = () => <AddPerson type="people" description="Here is a description..." /> 

//error
let d2 = () => <AddPerson type="people2" description="Here is a description..." /> 

import React，{createContext，useState，useContext}来自“React”
键入UseStateTuple=[T，React.Dispatch]
const StoreContext=createContext（null）
接口晶体管{
人物：UseStateTuple
//IStore可能有其他useState元组
//posts:UseStateTuple
}
界面道具{
类型：键控晶体管
描述：字符串
}
export const AddPerson:React.FC=（{type，description}）=>{
常量[input，setInput]=useState（“”）
const{[type]：[data，setData]}=useContext（StoreContext）！
返回
}
设d=（）=>

调用set方法时可能会遇到问题，因为它将是联合类型，因此可能需要类型断言。
通常要使用索引，索引表达式必须是
keyof T
类型，其中
T
是索引的任何类型。或者换句话说，索引表达式必须证明作为
T
的索引是有效的

如果将
类型
更改为
IStore键
，它将工作：

import React, { createContext, useState, useContext } from 'react'

type UseStateTuple<T> = [T, React.Dispatch<React.SetStateAction<T>>]
const StoreContext = createContext<IStore | null>(null)
interface IStore {
  people: UseStateTuple<string[]>
  // IStore could potentially have other useState tuples. Something like
  // posts: UseStateTuple<IPost[]>
}

interface Props {
  type: keyof IStore        
  description: string 
}

export const AddPerson: React.FC<Props> = ({type, description}) => {
  const [input, setInput] = useState('')

  const { [type]: [data, setData] } = useContext(StoreContext)!

  return <div></div>
}

let d = () => <AddPerson type="people" description="Here is a description..." /> 

//error
let d2 = () => <AddPerson type="people2" description="Here is a description..." /> 

import React，{createContext，useState，useContext}来自“React”
键入UseStateTuple=[T，React.Dispatch]
const StoreContext=createContext（null）
接口晶体管{
人物：UseStateTuple
//IStore可能有其他useState元组
//posts:UseStateTuple
}
界面道具{
类型：键控晶体管
描述：字符串
}
export const AddPerson:React.FC=（{type，description}）=>{
常量[input，setInput]=useState（“”）
const{[type]：[data，setData]}=useContext（StoreContext）！
返回
}
设d=（）=>

调用set方法时可能会遇到问题，因为它将是联合类型，因此可能需要类型断言。
这实际上更有意义，因为当您将
type
约束到
IStore
中的实际键时，它工作得更好。TS还是新手，所以我很欣赏额外的信息。这实际上更有意义，当您将
type
约束到
IStore
中的实际键时，它会工作得更好。对TS来说还是新的，所以我很感谢您提供的额外信息。