类型“只读<{}>”上不存在属性“值”

IT技术 reactjs typescript
2021-04-06 01:58:52

我需要创建一个表单，该表单将根据 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>
    );
  }
}

我收到以下错误： 

error TS2339: Property 'value' does not exist on type 'Readonly<{}>'.

我在代码注释的两行中收到此错误。这段代码甚至不是我的，我是从 react 官方网站 ( https://reactjs.org/docs/forms.html ) 得到的，但它在这里不起作用。

我正在使用 create-react-app 工具。

6个回答

的Component 定义如下所示：

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

这意味着状态（和props）的默认类型是：{}。
如果您希望您的组件value处于状态，那么您需要像这样定义它：

class App extends React.Component<{}, { value: string }> {
    ...
}

或者：

type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
    ...
}
天哪，伙计，它现在起作用了，再回答我一件事，这种语法与 TypeScript 相关，对吗？因为在 React 官方网站上它没有类似的东西
2021-05-31 01:58:52
正确的定义是：class Square extends React.Component<{ value: string }, { }> { ... }
2021-05-31 01:58:52
@NitzanTomer - 你救了我的一天
2021-06-01 01:58:52
是的，这与typescript密切相关。
2021-06-14 01:58:52 
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>('');
  ...
};

type's 也很好，就像@nitzan-tomer 的回答一样，只要你保持一致。

请总结在您的帖子上下文中一致意味着什么，以便无需阅读中等文章即可获得其全部value（这是一个非常有用的链接，谢谢）。
2021-05-26 01:58:52

如果你不想传递界面状态或props模型，你可以试试这个

class App extends React.Component <any, any>

问题是你还没有声明你的接口状态用你合适的“值”变量类型替换任何

这是一个很好的参考

interface AppProps {
   //code related to your props goes here
}

interface AppState {
   value: any
}

class App extends React.Component<AppProps, AppState> {
  // ...
}

我建议使用

仅用于字符串状态值

export default class Home extends React.Component<{}, { [key: string]: string }> { }

用于字符串键和任何类型的状态值

export default class Home extends React.Component<{}, { [key: string]: any}> { }

对于任何键/任何值

export default class Home extends React.Component<{}, { [key: any]: any}> {}
其它你可能感兴趣的问题
上一篇如何在react中滚动到底部？ 下一篇React Native 响应式字体大小