Javascript 如何在react redux typescript中将存储状态作为道具传递？

我试图将信息从存储的初始状态传递到渲染它的组件，但它没有显示出来。组件本身中的console.log显示它未定义。初始状态没有问题，我可以使用

App.tsx

中的console.log语句访问它，因此我怀疑它与将其作为道具传递有关，或者它需要使用

componentDidMount

或类似工具进行初始化

减速器。tsx:

import { combineReducers } from 'redux';
import {
    TaskListState,
    TaskActionTypes,
    ITask,
    ADD_TODO
} from './types'

const initialState:TaskListState = {
    tasks: [
        {
            name: "testing123",
            done: false,
        }
    ]
}

export function taskReducer(state = initialState, action: TaskActionTypes)
    : TaskListState {
        switch(action.type){
            case ADD_TODO:
                let newTask:ITask = {
                    name: action.name,
                    done: false
                }
                return {
                    tasks: [...state.tasks, newTask]
                }
            default:
                return state
        }
}

//create another reducer for the filtering, then combine the reducers

const TaskList = combineReducers({
    taskReducer
})

export default TaskList

import { connect } from 'react-redux'
import { TaskListState } from '../../redux/tasks/types'
import { Tasks } from '../tasks/Tasks'

const mapStateToProps = (state:TaskListState) => ({
    tasks: state.tasks
})

const mapDispatchToProps = {
}

export const Connector = connect(mapStateToProps, mapDispatchToProps)(Tasks)

import { ITask } from '../../redux/tasks/types'

import React from 'react';
import './Tasks.css';

type Props = {
    tasks: ITask[];
}

export const Tasks: React.FC<Props> = (props:Props) => {
    const { tasks } = props;
    console.log(tasks);
    return (
        <div>
        { tasks }
        </div>
    )
}

GetTask.tsx:

import { combineReducers } from 'redux';
import {
    TaskListState,
    TaskActionTypes,
    ITask,
    ADD_TODO
} from './types'

const initialState:TaskListState = {
    tasks: [
        {
            name: "testing123",
            done: false,
        }
    ]
}

export function taskReducer(state = initialState, action: TaskActionTypes)
    : TaskListState {
        switch(action.type){
            case ADD_TODO:
                let newTask:ITask = {
                    name: action.name,
                    done: false
                }
                return {
                    tasks: [...state.tasks, newTask]
                }
            default:
                return state
        }
}

//create another reducer for the filtering, then combine the reducers

const TaskList = combineReducers({
    taskReducer
})

export default TaskList

import { connect } from 'react-redux'
import { TaskListState } from '../../redux/tasks/types'
import { Tasks } from '../tasks/Tasks'

const mapStateToProps = (state:TaskListState) => ({
    tasks: state.tasks
})

const mapDispatchToProps = {
}

export const Connector = connect(mapStateToProps, mapDispatchToProps)(Tasks)

import { ITask } from '../../redux/tasks/types'

import React from 'react';
import './Tasks.css';

type Props = {
    tasks: ITask[];
}

export const Tasks: React.FC<Props> = (props:Props) => {
    const { tasks } = props;
    console.log(tasks);
    return (
        <div>
        { tasks }
        </div>
    )
}

任务。tsx:

import { combineReducers } from 'redux';
import {
    TaskListState,
    TaskActionTypes,
    ITask,
    ADD_TODO
} from './types'

const initialState:TaskListState = {
    tasks: [
        {
            name: "testing123",
            done: false,
        }
    ]
}

export function taskReducer(state = initialState, action: TaskActionTypes)
    : TaskListState {
        switch(action.type){
            case ADD_TODO:
                let newTask:ITask = {
                    name: action.name,
                    done: false
                }
                return {
                    tasks: [...state.tasks, newTask]
                }
            default:
                return state
        }
}

//create another reducer for the filtering, then combine the reducers

const TaskList = combineReducers({
    taskReducer
})

export default TaskList

import { connect } from 'react-redux'
import { TaskListState } from '../../redux/tasks/types'
import { Tasks } from '../tasks/Tasks'

const mapStateToProps = (state:TaskListState) => ({
    tasks: state.tasks
})

const mapDispatchToProps = {
}

export const Connector = connect(mapStateToProps, mapDispatchToProps)(Tasks)

import { ITask } from '../../redux/tasks/types'

import React from 'react';
import './Tasks.css';

type Props = {
    tasks: ITask[];
}

export const Tasks: React.FC<Props> = (props:Props) => {
    const { tasks } = props;
    console.log(tasks);
    return (
        <div>
        { tasks }
        </div>
    )
}

从“../../redux/tasks/types”导入{ITask}
从“React”导入React；
导入“/Tasks.css”；
类型道具={
任务：ITask[]；
}
导出常量任务：React.FC=（道具：道具）=>{
const{tasks}=props；
console.log（任务）；
返回(
{tasks}
)
}

我只是简单地检查了一下您的脚本，我认为您的reducer函数是错误的

export function taskReducer(state = initialState, action: TaskActionTypes)
    : TaskListState {
        switch(action.type){
            case ADD_TODO:
                let newTask:ITask = {
                    name: action.name,
                    done: false
                }
                return {
                    // tasks: [...state.tasks, newTask]
                    [...state.tasks, newTask]
                }
            default:
                return state
        }
}

我希望它对你有用。

在下面的一行中

export const Connector = connect(mapStateToProps, mapDispatchToProps)(Tasks)

您正在添加Tasks组件，但未传递名为Tasks的道具，这就是为什么它显示为undefined，请尝试在同一文件中渲染该组件

或者你可以这样做

mapStateToProps和mapDispatchToProps都将ownProps作为第二个参数

[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

---

参考

当您使用对象属性速记将

taskReducer

传递给

combinereducer

时，您的reducer将在存储中命名为

taskReducer

，存储如下所示

const存储={
taskReducer：{
任务：[{
名称：“testing123”，
完成：错误，
}]
}
}

因此，当您尝试在

MapStateTops

中选择任务时，

状态.tasks

是

未定义的

根状态的类型不是

TaskListState

，以获取存储使用的类型

---

抱歉，我不太明白-我将存储状态作为道具传递，并且在该状态中存在一个名为tasks的数组，我正在传递该数组，因此在某种程度上我传递了一个名为tasks的道具？我现在没有向组件传递任何ownProps。它不起作用，不幸的是，它会创建一个错误。这也不是我目前面临的错误的原因，因为我没有使用ADD_TODO。尽管如此，还是要谢谢你