mapStatetoProps不会通过道具

问题描述

我有一个react-redux应用程序。该应用程序允许用户使用模型制作3d项目。在我试图显示所有项目和模型的应用程序中，我的reducer已成功接收数据。

因此，在我的项目（资源/实体）中，我已经像这样设置了redux：

   import { modelsActions } from '../../Models/redux';
   import { projectsActions } from '../redux';


              

import AllProjects from './All.js';
import { connect } from 'react-redux';

 const mapStatesToProps = state => {
  console.log('FETCHED  DATA',state.models);
   return {
...state.models.models,// models return models anboject with has. an array nested in models attribute 
     ...state.projects
//models: state.models !!! I have  also tried  setting  models  proplike this
  };
};

 const mapDispatchToProps = dispatch => ({
   fetchModels: () => dispatch(modelsActions.fetchModels()),deleteModel: modelId => {
    return dispatch(modelsActions.deleteModel(modelId));
   },fetchProjects: () => dispatch(projectsActions.fetchProjects()),addProject: (title,description) => {
     return dispatch(projectsActions.addNewProject(title,description));
     }
     });

 export default connect(mapStatesToProps,mapDispatchToProps)(AllProjects);

注意：所以每个资源都有它自己的redux。逻辑。在其组件文件夹中进行设置，例如：

      Component
              | 
               redux
               |    |
               |      action/reducerand. other redux stuff of the component
               |
               subview
                      |
                       multiple diferent views here differentviews.js

所以我想在所有项目组件中显示所有项目和模型。我的allProject组件看起来。像这样：

   import React,{ useState,useEffect } from 'react';
   import PropTypes from 'prop-types';
   import history from '@utils/history';
   import MainListView from '@components/MainListView';
   import GridView from '@components/GridView';
   import AddProject from '../../../pages/Projects/Add';

  import './style.scss';
  import { withRouter } from 'react-router';

  const AllProjects = ({
         addProject,fetchProjects,fetchModels,projects,models
        }) => {
       // const { fetchProjects,addProject,models } = props;
       const [addNewProject,setAddNewProject] = useState(false);
       const [inputValue,setInputValue] = useState('');
      useEffect(() => {
console.log('FETCHING Projects');
fetchProjects();
console.log('FETCHING models');
fetchModels();
 },[]);

   // console.log("addProject123",addProject);
     const handleOnEdit = model => {
      history.push('/models/' + model.id,{ model });
      };
       ......................lots. component related. methods here not related. to question here
        ............................................................................

我不知道是否有帮助，但这是道具类型的渲染方法

     console.log('All Projects comp = ',projects);
      console.log('dfvrsve',models);
    return (
      <div className="projects-container">
     <MainListView
       title={'Your Projects'}
        dataList={projects}
       onProjectClick={handleOnProjectClick}
       setAddNewEntry={handleAddNewProject}
       addNewEntry={addNewProject}
       >
    <AddProject
      value={inputValue}
      placeholder={'Project Name'}
      onChange={handleAddProjectInput}
      onAddProjectSuccess={handleAddProjectSuccess}
      onAddProjectCancel={handleAddProjectCancel}
    />
  </MainListView>

  <GridView
    title={'Your Models'}
    dataList={models ? models : []}
    onEdit={handleOnEdit}
  />
   </div>
  );
 };

   AllProjects.propTypes = {
   projects: PropTypes.instanceOf(Array),models: PropTypes.instanceOf(Array),loadingStatus: PropTypes.string,fetchModels: PropTypes.func,fetchProjects: PropTypes.func
  };

   AllProjects.propTypes = {
   projects: [],models: [],loadingStatus: 'NOT_LOADING',fetchModels: () => {},fetchProjects: () => {}
   };

   export default withRouter(AllProjects);

好的，您可以看到。我将状态对象记录在mapStateToProps console.log('FETCHED DATA',state.models);

中

在这里，我确实从后端api确认了减速器检索数据。但是即使您可以看到我将组件与redux export default connect(mapStatesToProps,mapDispatchToProps)(AllProjects);连接起来。

我的allprojects组件中得到一个空数组。

在render方法上方，我再次记录了模型状态（ console.log('dfvrsve',models);），即使我从redux传递了它，我也得到了一个空数组。

这是我的日志：

        reducer.js:27 FETCH_MODELS_SUCCESS =  (13) [{…},{…},{…}]
      index.js:29 FETCHED  DATA {models: Array(13),loadingStatus: "LOADED"} 

index.js是我在其中配置mapstateToProp和redux的文件的名称。

将会是真的。感谢您的帮助， 谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）