Javascript 没有带类型为'；的参数的索引签名；字符串'；在类型'；{有序图1:any；有序图2:any；}'；

如何修复此问题？

Typescript不知道

事件.target.name

中的

字符串

是该.orders的有效键。您需要断言

名称

与

as

的可接受值相匹配

这是一个很常见的问题，我想把你们引向另一个答案，但在这段代码中还有一些我想解决的危险信号

您正在状态外存储有状态数据。别这样！组件将不会在正确的时间使用正确的值重新渲染。

订单

应该是此.state的一部分，可以在此处或父级中。我不知道为什么在这里更新道具时要传递道具的值，这让我想知道这个组件是否应该没有状态，应该只使用回调来设置父级中的状态。React建议您不要基于道具和属性创建状态。但我现在将忽略这一点，并假设这些是初始值

丢弃

任何
。使用
any
作为类型时，您将失去typescript的好处。
setOrders
中的值来自
parseInt
，因此我们知道
order\u图1
和
order\u图2
应该是type
number
。为什么不说呢

代码：

从“React”导入React；
接口命令{
顺序图1：数字；
顺序图2：数字；
}
接口MyProps扩展订单{
setOrder:（…args:any）=>void；//接受args的函数。。。？？
}
接口MyState扩展了订单{
otherProperty：字符串；
}
类设置扩展了React.Component{
//不需要构造函数来设置状态
状态={
//最好不要从道具中获得状态
顺序图：this.props.order图，
order_graph_2:this.props.order_graph_2，
//只是为了表明我们可以在订单旁边有其他属性
其他属性：“
};
//需要是箭头函数才能正确访问'this'
//可能使用（事件：React.ChangeEvent）
//可以通过将名称作为参数传递来避免断言
setOrders=（事件：{target:{name:React.ReactText；value:string}}）=>{
//我不喜欢这个解决方案，但是我们可以通过复制以前的状态来避免TS错误
this.setState（（prevState）=>({
…国家，
[event.target.name]：parseInt（event.target.value）
}));
};
//helper函数避免了两个输入的重复信息
//可以设置以下任一属性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
//或https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
renderInput=（名称：keyof Orders）=>(
{name}
如果您确信名称是其中一个键，则可以断言其类型：
this.orders[event.target.name as keyof MyProps]
MyProps还有另一个属性，因此这会给我一个错误
元素隐式具有“any”类型，因为类型的表达式为“order\u graph\u 1”\124;“order\u graph\u 2”\124;“setOrders”'不能用于索引类型'{order\u graph\u 1:any；order\u graph\u 2:any；}'。属性'setOrders'在类型'{order\u graph\u 1:any；order\u graph\u 2:any；}'上不存在。
@LindaPaiste抱歉，我没有看到，因为它在同一行上。您可以通过多种方式断言正确性：
this.orders[event.target.name为'order_graph_1'|'order_graph_2']
。但我刚刚意识到，
这个.orders
不是
状态的一部分
！这是一个糟糕的设计。它需要处于您的状态。（所有这些
任何
注释也都不好）。我会写一个答案。是的，我会修复类型，但必须首先运行它：P谢谢！@LindaPaiste
setOrder
prop的用途是什么？该组件是否更新父级中的状态？我不确定它是否需要存储订单，或者它是否只需要从父级发送和接收数据。你能帮我解释一下吗我看看这里？
interface MyProps {
    order_graph_1: any;
    order_graph_2: any;setOrder: any}

class Setup extends React.Component<MyProps, MyState>{
    orders: { order_graph_1: any; order_graph_2: any; };
    constructor(props: MyProps){
        super(props);
        this.orders = {
            "order_graph_1":this.props.order_graph_1,
            "order_graph_2":this.props.order_graph_2
        }; 
    }
    
    setOrders(event: { target: { name: React.ReactText; value: string; }; }){
        this.orders[event.target.name] = parseInt(event.target.value);
    }

this.orders[event.target.name]

Element implicitly has an 'any' type because expression of type 'ReactText' can't be used to index type '{ order_graph_1: any; order_graph_2: any; }'.
  No index signature with a parameter of type 'string' was found on type '{ order_graph_1: any; order_graph_2: any; }'.

import React from "react";

interface Orders {
  order_graph_1: number;
  order_graph_2: number;
}

interface MyProps extends Orders {
  setOrder: (...args: any) => void; // function which takes args...??
}

interface MyState extends Orders {
  otherProperty: string;
}

class Setup extends React.Component<MyProps, MyState> {
  // don't need a constructor just to set state
  state = {
    // it is best not to derive state from props
    order_graph_1: this.props.order_graph_1,
    order_graph_2: this.props.order_graph_2,
    // just to show that we can have other properties alongside the orders
    otherProperty: ""
  };

  // needs to be an arrow function to access `this` properly
  // could use ( event: React.ChangeEvent<HTMLInputElement>)
  // could avoid the assertion by passing the name as an argument
  setOrders = (event: { target: { name: React.ReactText; value: string } }) => {
    // I don't love this solution, but we can avoid the TS errors by copying the previous state
    this.setState((prevState) => ({
      ...prevState,
      [event.target.name]: parseInt(event.target.value)
    }));
  };

  // helper function avoids having to duplicate info for the two inputs
  // can set any of these atrributes: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
  // or https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
  renderInput = (name: keyof Orders) => (
    <>
      <label htmlFor={name}>{name}</label>
      <input
        id={name} // label htmlFor matches id
        name={name}
        value={this.state[name]}
        onChange={this.setOrders}
        type="number"
        min={0} // don't allow negatives
        step={1} // allow whole numbers only
      />
    </>
  );

  render() {
    return (
      <div>
        {this.renderInput("order_graph_1")}
        {this.renderInput("order_graph_2")}
      </div>
    );
  }
}