无法使用react typescript中的动态键访问状态值
在React TypeScript中，无法直接使用动态键访问状态值。这是因为在TypeScript中，动态键访问是不被允许的，编译器无法确定动态键的类型和对应的值。
解决这个问题的一种常见方法是使用索引签名。索引签名允许我们在对象类型中定义一个索引，通过索引来访问对象的属性。在React中，可以使用索引签名来访问状态值。
首先，需要定义一个接口来描述状态对象的类型，包括可能的动态键。例如：
interface MyState {
[key: string]: string;
}然后，在组件中声明状态并使用索引签名来访问状态值。例如：
const MyComponent: React.FC = () => {
const [state, setState] = useState<MyState>({});
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setState((prevState) => ({
...prevState,
[name]: value,
}));
};
return (
<div>
<input
type="text"
name="key1"
value={state['key1'] || ''}
onChange={handleInputChange}
/>
<input
type="text"
name="key2"
value={state['key2'] || ''}
onChange={handleInputChange}
/>
</div>
);
};在上面的示例中，我们使用了索引签名[name]: value来更新状态对象。通过在输入框的name属性中设置动态键，我们可以动态地访问和更新状态值。
对于腾讯云相关产品，可以考虑使用腾讯云的云函数 SCF（Serverless Cloud Function）来实现无服务器的后端逻辑。SCF 提供了弹性、高可用的计算能力，可以根据实际需求自动扩缩容。您可以通过访问腾讯云 SCF 的官方文档了解更多信息：腾讯云 SCF 产品介绍
请注意，以上答案仅供参考，具体的解决方案可能因实际情况而异。
相关·内容
我试图使用React函数组件中的字符串访问状态变量。
例如，我知道在Class组件中，我可以根据输入来访问状态：
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
inputOne: null
}}
handleBlur(e, name) {
if (!this.state[name]) {
this.setState({
[`${name}Missing`]: tr
浏览 0提问于2021-10-13得票数 1
回答已采纳
基本上，我遵循这个tutorial，将其转换为React和TypeScript 下面是我为onSubmit事件编写的代码 const signUp = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
// Problematic lines of code
const email = event.target[0].value;
const password = event.target[1].value;
}; 和基本的注册表 return (
&l
浏览 89提问于2021-08-13得票数 0
回答已采纳
我正在学习React.js并阅读react.js官方文档。官方文档给出了一个例子，我对此有疑问： 原始代码： class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
浏览 21提问于2021-07-25得票数 0
2回答
在React Docs，handling events一文中:状态如何更新为相反的布尔值，我有一个问题。 为什么我们需要在isToggleOn: !prevState之后添加.isToggleOn 为什么我不能简单地编写isToggleOn: !prevState prevState是{isToggleOn: true}。所以!prevState应该是{isToggleOn: false}。我说的对吗？它把我搞糊涂了，因为它听起来像{property: opposite of the boolean.property}。 我知道prevState是什么，我知道.setState()正在更新状
浏览 60提问于2021-07-07得票数 0
回答已采纳
由于某些原因，我无法在React onClick中设置状态。如果我硬编码"shape1“而不是"shape"，它可以工作，但我想循环通过每个键并动态设置它，因为有可变数量的形状。
resetColors() {
Object.keys(this.state).forEach(shape => {
this.setState({shape: 'black'})
})
}
浏览 2提问于2017-05-22得票数 0
1回答
我第一次在React中使用类型，我对它不太熟悉。
我试图将子组件中的表单中的数字添加到数字数组中。
为此，我创建了一个useState钩子：
const [valuesList, setValuesList] = useState<number[]>([]);
现在，我试图将setValuesList挂钩传递给子组件：
<AddNum
setValues={setValuesList}
/>
在子组件中，我为道具定义了一个接口：
interface AppProps {
setValues: (value: number) => v
浏览 0提问于2020-07-15得票数 0
回答已采纳
我在ThemeDoc组件中创建了一个钩子，然后使用React，我尝试在SideBarBlurChange组件中获取钩子的值，我有很多其他的钩子，除了RangeBlur钩子外，所有其他钩子都正常工作，当我试图获取RangeBlur值时，得到了错误。
无法读取空的属性“toFixed”
和我一样，ponel的问题是，我没有得到钩子的值(在我的例子中，值40，一个素数)，我得到的是空值，我不明白为什么，但是首先，我想演示一下屏幕截图。
顺便说一句，所有其他钩子都工作得很好，我还想提供一个指向我在中使用的npm包SideBarBlurChange的链接。
我从组件中删除了不必要的细
浏览 0提问于2021-02-02得票数 0
1回答
您能分享一下您对如何动态覆盖物料表头标题的想法吗？
示例：
const [columns, setColumns] = React.useState([
{ title: variable, field:'test_id },
我需要动态替换状态值中的变量值。
浏览 3提问于2020-11-29得票数 0
如何在Typescript tsx中遍历React组件的子组件？
以下内容将是有效的jsx：
public render() {
return (
<div>
{React.Children.map(this.props.children, x => x.props.foo)}
</div>
);
}
然而，在Typescript中，x的类型是React.ReactElement<any>，所以我无法访问属性。有什么我需要做的选角吗？
浏览 0提问于2015-12-02得票数 23
回答已采纳
我在javascript中有一个简单的React表单，但我似乎无法正常工作。它非常简单，但不会加载到浏览器中。 import React from 'react';
import { render } from 'react-dom';
function signUp() {
function handle () {console.log(document.getElementById('year').value);
}
return (
<>
<select id="year">
浏览 15提问于2021-06-17得票数 0
回答已采纳
我试图给react中的一个组件一个有条件的颜色，如果它的类型是绿色的，或者不喜欢它将是红色的。这在javascript中可以工作，但是使用typescript时，我得到了错误： 元素隐式具有“”any“”类型，因为“”string“”类型的表达式不能用于索引类型“”{ like: string；dislike: string；}“”。““”在类型'{ like: string；dislike: string；}‘上未找到参数类型为'string’的索引签名。 我对react中的typescript相当陌生，所以我不太确定如何解决这个问题，所以任何帮助都会很好！ import
浏览 111提问于2021-01-31得票数 1
这段代码在TypeScript 3.1.x中编译得很好 import React from 'react';
interface IErrorProps {
error: string;
}
export default function foo<TErrorProps extends IErrorProps>(
ErrorCmp: React.ComponentType<TErrorProps>
) {
return () => {
return <ErrorCmp error="tes
浏览 22提问于2019-05-02得票数 1
回答已采纳
1回答
我在我的react-native应用程序中使用react-native-video。我希望能够动态地改变视频源，但是我发现这并不容易。我的方法很简单，只需使用钩子更改剪辑名称，将video1更改为video2。但我无法更新视频实例： 我确实尝试过这样的东西： const [clipSelected, setClipSelected] = useState('video1');
const onButton = (name) => {
console.log("videoname", name)
setClipSelected(name);
}
浏览 24提问于2019-08-28得票数 0
回答已采纳
我使用TypeScript输入以下内容： const k = {
container: {
width: '100%',
},
} 当我使用智能感知时，TypeScript发现我的对象k有一个名为container的属性似乎很酷。它工作得很好。现在，我想限制属性的值，所以我声明了一个接口： interface StyleSet {
[key: string]: React.CSSProperties
} 现在我将类型添加到前面的对象中，所以我们有： const k: StyleSet = {
container: {
width: '10
浏览 48提问于2020-09-17得票数 0
1回答
我试图在react中实现动态搜索
、、、、
嗨，我试图在react中实现动态搜索，但我无法呈现所需的内容。
请在找到代码
当我试图过滤掉动态搜索结果时
初始屏幕当我试图搜索"bert“时，我在日志中得到了正确的结果，但我无法呈现相同的结果，看起来我能够呈现所需的结果数量，但不能呈现所需的结果。
浏览 3提问于2020-10-19得票数 0
回答已采纳
2回答
我已经定义了我的路线，我的链接工作正常。当路由器调用组件时，我希望通过链接传递一个道具。我甚至不知道这是否可能。
为了更好地理解，请查看代码：// I WANT TO PASS THE CURRENT PROJECT AS A PROP HERE和//I WANT TO GET THE PASSED PROP IN THE LINK HERE
我在react中的功能组件：
const ProjectList = () => {
....//not meaningful code. I get my data from a call to a database so its not pas
浏览 19提问于2021-02-22得票数 0
回答已采纳
我不知道hwo来修复这行调用上下文提供程序。如果我在那里设置这个状态值，它就会显示出undefind。如何解决这个问题？
错误:
context.tsx
import React, { Component } from 'react'
import { createContext } from 'react';
const Context = React.createContext('text');
//called context into Provider
export class Provider extends Component
浏览 7提问于2022-09-14得票数 1
1回答
我有一个git存储库，我应该使用命令react-scripts start启动它。当我运行这个命令时，我得到了这样的响应:无法找到typescript： react-scripts start
It looks like you're trying to use TypeScript but do not have typescript installed.
Please install typescript by running npm install typescript.
If you are not trying to use TypeScript, please remov
浏览 143提问于2021-09-03得票数 0
回答已采纳
3回答
我是TypeScript的新手。在render方法中显示this.state.something或将其赋值给函数中的变量时，我遇到了问题。
看一看最重要的代码：
interface State {
playOrPause?: string;
}
class Player extends React.Component {
constructor() {
super();
this.state = {
playOrPause: 'Play'
};
}
render() {
浏览 4提问于2017-10-28得票数 91
回答已采纳
我正在尝试使用一个带有Zoom的MutationObserver来观察主动式扬声器的变化。我使用useState声明一个状态变量，名为participants，用于保存有关缩放调用中每个参与者的信息。
我的MutationObserver似乎只读取参与者的初始值，这使我相信变量是绑定/评估的，而不是动态读取的。是否有一种将MutationObserver与React结合使用的方法，使MutationCallback读取动态更新的状态？
const [participants, setParticipants] = useState({});
...
const onSpeech
浏览 6提问于2022-01-26得票数 1
回答已采纳
我需要将来自的请求代理到一个单独的API服务器，并动态地或使用环境变量设置该服务器。我跟踪了，但是我使用的是TypeScript。即使在更新到最新版本(v3.1.0)之后，react-scripts-ts似乎也不会加载src/setupProxy.js。我让它与一起工作，但是无法让它与TypeScript一起工作。有人让setupProxy和React一起工作吗？
浏览 0提问于2019-02-11得票数 8
回答已采纳
这个问题是在使用TypeScript时，我有一个组件数组(文本输入)在我的状态中。我的状态中还有一个字符串数组，用于定义每个组件的占位符文本。每个组件都引用来自状态的占位符字符串数组，在其相应的索引处。
当我更新占位符数组中的字符串时(使用setState)，组件不会更新。我哪里出问题了？或者我是否误解了国家/道具的运作方式。
谢谢!
为了突出这个问题，我已经对代码做了很多简化。代码：
interface IState {
inputComponents: IResponseOption[];
test_placeholder: string;
}
interface IRespons
浏览 0提问于2018-08-09得票数 0
回答已采纳
1回答
在我的React/Redux应用中，我遇到了一个可重用性难题。我已经编写了可重用的React组件，例如dropdowns和sliders，并将状态值存储在我的Redux Store中。现在我开始明白了，只要组件的任何JSX实例更改状态，该组件的所有其他实例也会更改状态。它们都开始相互模仿，而我需要它们独立运行。我还想在组件的不同实例中以不同的方式初始化状态，但无法找到这样做的方法。例如，对于滑块，我希望滑块范围的起始值和结束值在组件的不同实例中是不同的。通过React的普通道具系统很容易做到这一点，但我对如何通过Redux做到这一点感到困惑。 我对此进行了一些研究，似乎解决方案是在Redux
浏览 12提问于2020-12-03得票数 0
我非常喜欢TS 2.4中的新动态模块支持，尽管我遇到了这个小问题：
使用import().then(.)给出了模块的类型。如果需要存储以后的允诺，则无法生成传递模块类型信息的类型参数。。
我试图在包装器react组件中执行动态加载(在这里，我应该使用react-路由器v4)，并且我希望开始在构造函数处加载，并在组件首次挂载时重新加载。这有一个“闪烁”的问题，但除此之外，它是有效的：
import * as React from 'react'
export class DashboardDynamic extends React.Component<any, any&g
浏览 2提问于2017-08-08得票数 3
回答已采纳
我正在使用React和Typescript，需要创建一个具有两个预定义属性的动态键的对象。这个字段是动态的，所以我不能在Typescript中预定义它。我尝试在接口中实现的结构是： [field: string]: {
property1: string,
property2: string
} 然后我希望能够动态地设置这个对象的关键点。比如, let item: string = "randomTest"
this.setState({
[item].property1: "test value 1"
}) 并通过以下方式访问： t
浏览 43提问于2020-01-20得票数 1
2回答
你知道这个错误吗？我得到以下行的ESlint错误visible={this.state.visible}
它说：“必须使用破坏状态分配”
它使用："eslint-config-airbnb“
提前谢谢你
import React from 'react'
import { Button, Modal } from 'antd'
class EditProfile extends React.Component {
state = { visible: false }
showModal = () => {
this.setSta
浏览 0提问于2019-07-18得票数 0
回答已采纳
更新：
我有个问题要问你。在我的react应用程序中，我有如下的基本状态。
constructor(props){
super(props);
this.state = {
title: "Hello";
}
}
假设我有按钮和onClick事件，我在状态中添加了新的动态关键点。假设key = "newValue“和"val"= 1。
onClickEvent(){
let splitArray = value.split('_');
let key = splitArray[0];
浏览 1提问于2017-11-21得票数 0
我试图设置我的类型记录反应项目，当我工作时，它会给我警告/错误，如果我正在做的事情是不可访问的。我的编辑已经给我列出了错误，但是我尝试设置eslint-plugin-jx-a11y，我只是无法让它工作。
这是我的package.json中的eslint部分
{
"eslintConfig": {
"parser": "@typescript-eslint/parser",
"extends": [
"react-app",
"react-app/jest"
浏览 4提问于2021-08-08得票数 6
回答已采纳
我正试着按照的方式拥有一个定制的周视图。
在这个例子中，他们将一个自定义的天数作为3，我希望它是动态的(通过保持状态变量)。我计划根据屏幕大小更改状态变量。(我已经将窗口宽度事件侦听器用于更新状态变量)
现在的问题是如何访问navigate和title静态函数中的状态变量？因为它们将是根据天中的无号定制的。
浏览 2提问于2020-08-04得票数 0
我试着用React-native制作了一个待办事项应用。它是一个使用typescript和expo的空白react原生项目。我用的是linux。 包含todo数组的状态会更新，但视图不会相应地呈现，直到我单击输入按钮并更改文本状态。 我有3个函数来修改状态- textChange (用于更新todoText状态)，handleAddTask (用于更新包含任务的数组)，rmTask (从任务数组中删除项) const [task, setTask] = useState('');
const [taskItems, setTaskItems] = useState([
浏览 22提问于2021-10-06得票数 0
回答已采纳
如何键入动态标记，以便与TypeScript作出反应？鉴于这一守则：
interface CompProps {
tag: string;
}
const MyComponent: React.FunctionComponent<CompProps> = ({
tag = "div",
children
}) => {
const Wrapper = tag;
return <Wrapper>{children}</Wrapper>;
};
我得到了这个错误：
类型'{子类: ReactNode；}‘与
浏览 1提问于2019-05-03得票数 26
我无法让React.createElement在TypeScript中编译。
interface IColorPickerProps {
}
interface IColorPickerState {
}
class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
constructor(props: IColorPickerProps) {
super(props);
}
}
组件创建：
let props: any = {}
Reac
浏览 3提问于2017-11-30得票数 3
回答已采纳
? return <img {...props} onLoad={event => {
console.log(event.target.naturalWidth)
}}/> 我想在TypeScript React中检索naturalWidth和naturalHeight。 但是被卡住了，TypeScript找不到那个属性。 如何在TypeScript React中检索naturalWidth和naturalHeight？
浏览 49提问于2019-06-04得票数 1
回答已采纳
为了检测<section>元素是否集中在viewport中，我无法console.log 单个 true语句。我正在为此实现一个[isFocused, setIsFocused]钩子。
这是我的窗户：
我需要这样，当Section 2定位在窗口的顶部时，就会出现一个console.log(true)。但这种情况发生了：
这就是我的实现：
import React, { useEffect, useRef, useState } from "react";
const SectionII = (props) => {
const sec
浏览 4提问于2021-08-30得票数 0
我正在制作一个使用useState react钩子的To应用程序。我已经完成与创建，读和删除部分，但我没有能够更新的状态。有人能帮帮我吗。我已经完成了同样的类组件。
/******************************我的app.js文件*
import React, { useState } from "react";
import "./App.css";
import ToDoList from "./Components/ToDoList";
function App() {
const [change, handleCh
浏览 3提问于2020-06-05得票数 0
回答已采纳
1回答
如何在react / typescript中动态渲染/导入图像？
我在React中使用Typescript。
以下是我想要实现的目标。
但这是行不通的。它没有解析表达式{ 'assets/icons/' + media + '.svg'}。
<div className="medias">
MEDIAS.map((media) =>
(<img src={ 'assets/icons/' + media + '.svg'} />)
浏览 3提问于2021-04-19得票数 1
const [val,setVal] = React.useState(0);
有时我会在其他人的代码中看到这一点。
setVal(()=>val);
这和这个有什么区别吗。
setVal(val);
浏览 5提问于2021-12-07得票数 1
回答已采纳
我正在尝试创建一个基于create-daml-app的Web应用程序，这个Web应用程序的React Typescript也将部署到Project DABL中。我们如何使用在Project DABL Ledger Settings中设置的参与方，并使用React Typescript作为Web应用程序的登录？基于create-daml-app，他们使用链接(https://login.projectdabl.com/auth/login?ledgerId=${ledgerId}`)进行登录，其中使用Project DABL帐户。 我知道我们可以下载各方作为json，然后在Web应用程序上使用
浏览 7提问于2020-07-14得票数 0
import { useState } from "react";
function useForm(initialfields) {
const [value, setValue] = useState(initialfields);
const reset = () =>
Object.keys(value).forEach((param) => setValue({ ...value, [param]: "" }));
//setValue(Object.keys(value).forEach((val) =>
浏览 10提问于2022-06-14得票数 0
回答已采纳
我无法完成react-native初始化，因为进程一直停留在安装所需的cocoapods依赖项上，请帮助
这是终端中显示的几个部分：
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 48 new dependencies.
├─ @babel/core@7.5.0
├─ @babel/runtime@7.5.0
├─ @react-native-community/eslint-config@0.0.5
├─ @types/eslint-visitor-keys@1.0.0
├─ @typescr
浏览 0提问于2019-07-05得票数 31
我有以下使用Typescript的import语句： import * as React from 'react';
import { MouseEvent } from 'react' Typescript抱怨我应该组合这些多个导入。我尝试了以下方法，但导入的MouseEvent是不同的： import MouseEvent, * as React from 'react' 在这个组合导入语句中，MouseEvent与通过import { MouseEvent } from 'react'导入的不同。 出于某种原因，Types
浏览 46提问于2019-03-19得票数 0
回答已采纳
我已经创建了动态框。我想在单击时将活动div的背景颜色更改为蓝色。当我单击第一个单元格时，它应该变成蓝色，然后当我单击第二个单元格时，第一个和第二个divs应该是蓝色的，当我单击第三个单元格时，第二个和第三个单元格应该是蓝色的，而第一个单元格应该变成红色。 import React, { Component } from "react";
import "./styles.css";
class ThinkingReact extends Component {
constructor(props) {
super(props);
thi
浏览 14提问于2020-09-28得票数 1
如何在React组件中调用由Ziggy的@route指令生成的JavaScript route函数？
route函数是在运行时生成的，因此不可能在react组件中预先导入它，因此Laravel Mix会抛出一个错误，无法编译项目。更清楚地说，由于我使用的是Typescript，如果不以某种方式导入路由的函数，我就无法编译我的组件。
我的堆栈是8号，惯性，反应。
浏览 3提问于2020-09-23得票数 0
我有一个动态路由，我试图在url中显示标题，并将(隐藏) id传递给我的动态路由，并在getStaticProps中使用id。我发现我无法在nextjs中轻松地传递数据，因为我们过去常常通过react路由器或其他客户端路由库传递数据。
我在跟踪的答案，但是当我console.log(context.params)看不到id从Link那里通过时，我在这里做错了什么？
// index.js
<Link
href={{
pathname: `/movie/[title]`,
query: {
浏览 2提问于2021-07-28得票数 3
回答已采纳
我正在使用Typescript通过React构建一个UI系统。我想创建一个<Input />组件来组成一个真正的<input />。组件<Input />应该接受<input />接受的每个属性作为道具。 为此，我检查了React中的<input />接受的内容，这就是结果： React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>; 首先，我这样设置我的接口： interface InputP
浏览 18提问于2020-04-17得票数 1
使用"react-scripts": "^4.0.3"样板创建项目，为了将 eslintrc.js 文件包含在“与类型记录的交互”项目中，我尝试了eslint --init，它创建了一个默认的eslintrc.js，下面是内容。
在全局中拥有eslint v. 7.32.0
eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:r
浏览 4提问于2021-10-15得票数 1
回答已采纳
在TypeScript中使用VSCode时，我发现自己经常将鼠标悬停在函数或对象上以检查它们的类型。 通常，这些对象的类型和接口依赖于多个其他接口和类型。因此，悬停并不能提供太多信息。 要检查类型，我必须手动进入节点模块，以找到类型声明并在那里进行检查。 有没有一种方法可以在VSCode中轻松地检查嵌套类型 下面是一个示例： ? 我希望有一种简单的方法来检查React.FunctionComponent的接口。
浏览 22提问于2020-01-27得票数 6
我目前正在第一次开发一个react-redux应用程序。我尝试创建一个组件来挑选一个大小，并将这个大小传递给商店。不幸的是，我知道我不能访问mapdispatchtoprops中组件的状态。有没有其他的解决方案可以得到同样的结果？提前感谢！ import React from 'react';
import thunk from 'redux-thunk';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/
浏览 23提问于2020-04-06得票数 0
我在某个地方看到了这个TypeScript代码。它汇编时没有任何问题：
const eventName = entityName + commandName;
pubsub.publish(triggerName, { [eventName]: response });
我假设它动态地创建一个名为eventName的对象文本。这个假设正确吗？在TypeScript文档中描述了这个特性的位置？
浏览 3提问于2017-11-28得票数 5
回答已采纳
我在整个Typescript应用程序中都使用了React功能组件。
我正在尝试动态更新另一个组件中的一些子组件，如下所示：
const memoizedIterateAndAddProps = useCallback(
(kids: ReactNode) => {
return React.Children.map(kids, (child) => {
if (React.isValidElement(child)){
console.log(child.type.name)
}
}
},
浏览 2提问于2021-11-09得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
