Question

我在JavaScript中遵循redux教程，但是当我使用TypeScript编写时，我无法将状态映射到道具。

App.tsx ：

import * as React from 'react';
import Todo from '../models/Todo';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import Main from './Main';

export interface State {
  todoList: Todo[];
  filterStatus: string;
  isAdding: boolean;
}

const defaultState: State = {
  todoList: [],
  filterStatus: 'SHOW_ALL',
  isAdding: false,
};

const reducer = (state: State = defaultState, action: {}) => {
  return state;
};

const store = createStore(reducer);

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Main />
      </Provider>
    );
  }
}

export default App;

Main.tsx ：

import * as React from 'react';
import { connect } from 'react-redux';
import { State } from './App';

class Main extends React.Component {
  render() {
    return (
      <div style={{ backgroundColor: 'red' }}>{this.props.filterStatus}</div>
    );
  }
}

function mapStateToProps(state: State) {
  return {
    filterStatus: state.filterStatus,
  };
}

export default connect(mapStateToProps)(Main);

它说：

[ts]属性'filterStatus'在类型'Readonly＆lt; {上不存在孩子？：ReactNode; }＆GT; ＆安培;只读＆LT; {}＆GT;”

Answer 1

您需要为组件指定道具的类型。

export interface MainProps {
  filterStatus: string;
}

class Main extends React.Component<MainProps>

Redux TypeScript无法将状态映射到props

1 个答案: