Question

我有一个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, fetchModels, projects, 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的文件的名称。

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

mapStatetoProps不会。通过道具

0 个答案: