无法使用React-Redux在Modal中显示数据

Question

我有一个称为SearchForm的组件，该组件正在分派一个操作以获取数据并将其作为道具发送给另一个组件SlotTable。现在，我希望此SlotTable组件调度另一个操作并从另一个api获取数据，并将数据作为道具发送到组件RatingModal，该组件显示以porps形式传递的数据。

下面是正在使用的代码段-SlotTable.js

class SlotTable extends React.Component {
constructor(props){
    super(props);
    this.state = {
        doctorId: 0,
        doctorName: "",
    }
}

handleClick = (event) => {
    event.preventDefault();
}

handleNameClick = (id) => {
    this.setState({
        doctorId: id,
    })
    this.props.getRatings(id);
}
render() {
  const slots = this.props.slots;
  return (
    <div id="slotsTable" className="">
      <table>
        <tbody>
          {
            slots.map((slot, index) => (
              <tr id={slot.id} key={index}>
                <td><span data-toggle="modal" data-target="#ratingModal" onClick={() => this.handleNameClick(slot.doctorId)}>{slot.doctorName.split(", ")[0]}</span></td>

              </tr>
            ))
          }
        </tbody>
      </table>
      <RatingModal info={this.props.data} />
    </div>
  );
 }
}

const mapStateToProps = (state) => ({
    data: state.data });

const mapDispatchToProps = dispatch => ({
    getRatings: id => dispatch(getRatings(id)) });

export default connect(mapStateToProps, mapDispatchToProps)(SlotTable);

RatingModal.js

class RatingModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            doctorId: 0,
            avgRating: null,
            comments: null,
            data: null
    }
}

render() {
    return (
        <div className="modal fade" id="ratingModal">
            <div className="modal-dialog modal-dialog-centered">
                <div className="modal-content">
                    <div className="modal-body">
                        {JSON.stringify(this.state.data)}
                    </div>
                </div>
              </div>
            </div>
        </div>
    )
}

}

export default RatingModal;

动作如下

import { HOSTNAME } from '../constants'

export const fetchRatings = () => {
    return {
        type :  "FETCH_RATINGS"
    };
};

export const receivedRatings = (ratings) => {
    return {
        type : "RECEIVED_RATINGS",
        data : ratings
    };
};

export const ratingsNotAvailable = () => {
    return {
        type : "RATINGS_NOT_AVAILABLE"
    }
}

export const receiveError = () => {
    return {
        type : "RECEIVED_ERROR"
    };
};

export const getRatings = (id) => {
    const url = HOSTNAME + `/rating/` + id;
    store.dispatch(fetchRatings());
    return (dispatch, getState) => {
        return axios.get( url )
            .then(data => {
                console.log(data);
                dispatch(receivedRatings(data));
            })
            .catch(error => {
                console.log(error);
                if (error.response.status === 404) {
                    console.log("dispatching error 404");
                    dispatch(ratingsNotAvailable());
                }
                else dispatch(receiveError()); 
            })
    }
}

并提供减速器

const initialState = {
    data: {
        rating: null,
        comments: null
    },
    isLoading: false,
    isError: false,
    message: ""
}

const ratingModalReducer = (state = initialState, action) => {
    switch (action.type) {
        case "FETCH_RATINGS" : return Object.assign({
            data: {
                rating: null,
                comments: null
            },
            isLoading: true,
            isError: false,
            message: ""
        }); 

        case "RECEIVED_RATINGS" : return Object.assign({
            data: action.data,
            isLoading: false,
            isError: false,
            message: "" 
        });

        case "RATINGS_NOT_AVAILABLE" : return Object.assign({
            data: null,
            isLoading: false,
            isError: false,
            message: "Sorry! There are no ratings available for the doctor."
        });

        case "RECEIVED_ERROR" : return Object.assign({
            data: {
                rating: null,
                comments: null
            },
            isLoading: false,
            isError: true,
            message: "An unexpected error occured! Please try again later."
        });

        default: return state;
    }
}

export default ratingModalReducer;

模式中的数据显示为null，但是正确记录了操作中记录的数据。

Edit：原因可能是由于减速器。由于我有多个reducer，因此在商店中调用任何一个reducer可能会解决此问题，因为searchReducer效果很好。一旦两个减速器组合在一起，就会开始显示错误，即this.props.slots is not defined。我无法调用此reducer，直到之前的组件提取了数据。

Answer 1

呈现SlotTable组件时，也会创建RatingModal组件。您最初将数据变量的状态设置为null。

当redux存储中的数据变量更改时，它会通过props.data字段传递，但是state.data变量仍然保持为空。

一种可能的解决方案是在RatingModal组件的主体中使用{JSON.stringify（this.props.data）}}>

编辑：现在我看到您通过info参数提供了数据，所以正确的方法是{JSON.stringify（this.props.info）}