Question

我不明白为什么我的Redux道具在React组件上显示为空。这是Redux状态的屏幕截图：

这是可视化的组件。它是父组件的子组件，该父组件可获取数据并在元素数组中运行for循环。

import React, { Component } from 'react'
import { connect } from "react-redux";
import PropTypes from "prop-types";

 class ResourceCard extends Component {
  render() {
    const { resource } = this.props;

    return (
      <div className="resource-card">
        <div className="resource-card-header">
        <span className="res-span-header">{resource.header}</span>
        </div>
        <div className="resource-card-image">
        <img src={resource.image} alt={resource.header} width='300px' />
        </div>
        <div className="resource-card-desc">
        <span className="res-span-desc">{resource.description}</span>
        </div>
        <div className="resource-card-link">
        <span className="res-span">{resource.website}</span>
        </div>
      </div>
    )
  }
}


ResourceCard.propTypes = {
  resource: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  resource: state.resource
});

export default connect(
  mapStateToProps,
  {}
)(ResourceCard);

css呈现正确，并且控制台中没有错误，但内容本身不存在：

这里可能出什么问题了？

已编辑：添加操作代码：

// Get Resources
export const getResources = () => dispatch => {
  axios
    .get("/api/resources")
    .then(res =>
      dispatch({
        type: GET_RESOURCES,
        payload: res.data
      })
    )
    .catch(err =>
      dispatch({
        type: GET_RESOURCES,
        payload: null
      })
    );
};

还有减速器：

import {
  ADD_RESOURCE,
  GET_RESOURCES,
  DELETE_RESOURCE,
  GET_RESOURCE
} from "../actions/types";

const initialState = {
  resources: [],
  resource: {}
};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_RESOURCES:
      return {
        ...state,
        resources: action.payload
      };
    case GET_RESOURCE:
      return {
        ...state,
        resource: action.payload
      };
    case DELETE_RESOURCE:
      return {
        ...state,
        resources: state.resources.filter(resource => resource._id !== action.payload)
      };
    case ADD_RESOURCE:
      return {
        ...state,
        resources: [action.payload, ...state.resources]
      };
    default:
      return state;
  }
}

运行for循环的父组件：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ResourceCard from './ResourceCard';

class ResourceFeed extends Component {
  render() {
    const { resources } = this.props;
    return resources.map(resource => <ResourceCard key={resource._id} resource={resource} />)
  }
}

ResourceFeed.propTypes = {
  resources: PropTypes.array.isRequired
}

export default ResourceFeed;

上面的组件包含该父对象：

<ResourceFeed resources={resources}/>

Answer 1

问题在这里：

const mapStateToProps = state => ({
  auth: state.auth,
  resource: state.resource      // <========== in this line
});

在ResourceCard组件中，您从两个地方传递resource道具，一个来自父组件，一个来自redux商店，这就是为什么。

您的组件期望父元素的值为resource，因此请删除此行：

resource: state.resource

Redux道具未显示在React组件中

1 个答案: