reactjs 类型“只读<{}>”上不存在属性“值”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47561848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Property 'value' does not exist on type 'Readonly<{}>'
提问by Luis Henrique Zimmermann
I need to create a form that will display something based on the return value of an API. I'm working with the following code:
我需要创建一个表单，该表单将根据 API 的返回值显示一些内容。我正在使用以下代码：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value); //error here
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} /> // error here
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
I'm getting the following error:
我收到以下错误：
error TS2339: Property 'value' does not exist on type 'Readonly<{}>'.
I got this error in the two lines I commented on the code. This code isn't even mine, I got it from the react official site (https://reactjs.org/docs/forms.html), but it isn't working here.
我在代码注释的两行中收到此错误。这段代码甚至不是我的，我是从 react 官方网站 ( https://reactjs.org/docs/forms.html) 得到的，但在这里不起作用。
Im using the create-react-app tool.
我正在使用 create-react-app 工具。
回答by Nitzan Tomer
The Componentis definedlike so:
的Component定义如下所示：
interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }
Meaning that the default type for the state (and props) is: {}.
If you want your component to have valuein the state then you need to define it like this:
这意味着状态（和道具）的默认类型是：{}。
如果您希望您的组件value处于状态，那么您需要像这样定义它：
class App extends React.Component<{}, { value: string }> {
...
}
Or:
或者：
type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
...
}
回答by Leo
In addition to @nitzan-tomer's answer, you also have the option to use inferfaces:
除了@nitzan-tomer 的回答，您还可以选择使用inferfaces：
interface MyProps {
...
}
interface MyState {
value: string
}
class App extends React.Component<MyProps, MyState> {
...
}
// Or with hooks, something like
const App = ({}: MyProps) => {
const [value, setValue] = useState<string>(null);
...
};
Either is fine, as long as you're consistent.
两者都可以，只要您保持一致。
回答by Minuka ArTy Weerathunga
The problem is you haven't declared your interface state replace any with your suitable variable type of the 'value'
问题是你还没有声明你的接口状态用你合适的“值”变量类型替换任何
interface AppProps {
//code related to your props goes here
}
interface AppState {
value: any
}
class App extends React.Component<AppProps, AppState> {
// ...
}
回答by apokryfos
event.targetis of type EventTargetwhich doesn't always have a value. If it's a DOM element you need to cast it to the correct type:
event.target是EventTarget不总是有值的类型。如果它是一个 DOM 元素，您需要将其转换为正确的类型：
handleChange(event) {
this.setState({value: (event.target as HTMLInputElement).value});
}
This will infer the "correct" type for the state variable as well though being explicit is probably better
这也将推断状态变量的“正确”类型，尽管显式可能更好
