我发现无论我做什么，我的this.props.streams的值总是未定义的。我已经确认后端API在查询时返回值。示例输出:
{
"welcome": "Livestream service",
"livestreamURL": "https://",
"replayURL": "https://",
"completedURL": "https://",
"_id": "6027e477fe33c55e8c5eef9c",
"title": "Service for derping",
"owner": "Derpface",
"serviceDate": "2021-02-25T12:00:00.000Z",
"dateAdded": "2021-02-13T14:38:47.673Z",
"__v": 0
},
{
"welcome": "Livestream service",
"livestreamURL": "https://",
"replayURL": "https://",
"completedURL": "https://",
"_id": "6027e47afe33c55e8c5eef9d",
"title": "Service for derping",
"owner": "Derpface",
"serviceDate": "2021-02-25T12:00:00.000Z",
"dateAdded": "2021-02-13T14:38:50.749Z",
"__v": 0
}
]
无论我尝试什么，我似乎都不能让它填充结果到props。我有以下相关文件:
客户端/src/组件/StreamList.js:(问题在哪里)
import { Container, ListGroup, ListGroupItem, Button } from "reactstrap";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { connect } from "react-redux";
import { getStreams, deleteStream, addStream } from '../actions/streamActions';
import PropTypes from "prop-types";
class StreamList extends Component {
static propTypes = {
getStreams: PropTypes.func.isRequired,
stream: PropTypes.object.isRequired,
isAuthenticated: PropTypes.bool,
};
componentDidMount() {
this.props.getStreams();
}
onDeleteClick = (_id) => {
this.props.deleteStream(_id);
};
render() {
const { streams } = this.props.streams;
return (
<Container>
{this.props.isAuthenticated ? (
<>
<h2>You're logged in.</h2>
<ListGroup>
<TransitionGroup className="stream-list">
{streams.map(({ _id, title }) => (
<CSSTransition key={_id} timeout={500} classNames="fade">
<ListGroupItem>
{this.props.isAuthenticated ? (
<Button
className="remove-btn"
color="danger"
size="sm"
onClick={this.onDeleteClick.bind(this, _id)}
>
×{" "}
</Button>
) : null}
{title}
</ListGroupItem>
</CSSTransition>
))}
</TransitionGroup>
</ListGroup>
</>
) :
<h2>You must be logged in to see conent</h2>}
</Container>
);
}
}
const mapStateToProps = (state) => ({
stream: state.stream,
isAuthenticated: state.auth.isAuthenticated,
});
export default connect(mapStateToProps, { getStreams, deleteStream })(StreamList);
/客户/src/streamActions.js
import axios from "axios";
import { GET_STREAMS, ADD_STREAM, DELETE_STREAM, STREAMS_LOADING } from "./types";
import { tokenConfig } from "./authActions";
import { returnErrors } from "./errorActions";
export const getStreams = () => (dispatch) => {
dispatch(setStreamsLoading());
axios
.get("/api/streams")
.then((res) =>
dispatch({
type: GET_STREAMS,
payload: res.data,
})
)
.catch((err) =>
dispatch(returnErrors(err.response.data, err.response.status))
);
};
export const addStream = (stream) => (dispatch, getState) => {
axios
.post("/api/streams", stream, tokenConfig(getState))
.then((res) =>
dispatch({
type: ADD_STREAM,
payload: res.data,
})
)
.catch((err) =>
dispatch(returnErrors(err.response.data, err.response.status))
);
};
export const deleteStream = (id) => (dispatch, getState) => {
axios
.delete(`/api/streams/${id}`, tokenConfig(getState))
.then((res) =>
dispatch({
type: DELETE_STREAM,
payload: id,
})
)
.catch((err) =>
dispatch(returnErrors(err.response.data, err.response.status))
);
};
export const setStreamsLoading = () => {
return {
type: STREAMS_LOADING,
};
};
/客户/stc/还原剂
import { GET_STREAMS, ADD_STREAM, DELETE_STREAM, STREAMS_LOADING } from '../actions/types';
const initialState = {
streams: [],
loading: false
}
export default function(state = initialState, action) {
switch(action.type) {
case GET_STREAMS:
return {
...state,
streams: action.payload,
loading: false
};
case DELETE_STREAM:
return {
...state,
streams: state.streams.filter(stream => stream._id !== action.payload)
};
case ADD_STREAM:
return {
...state,
streams: [action.payload, ...state.streams]
};
case STREAMS_LOADING:
return {
...state,
loading: true
}
default:
return state;
}
}
/客户/src/App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import AppNavbar from './components/AppNavbar';
// import ShoppingList from './components/ShoppingList';
import { Provider } from 'react-redux';
import store from './store';
// import ItemModal from './components/ItemModal';
import { Container } from 'reactstrap';
import { loadUser } from './actions/authActions';
import StreamList from './components/StreamList';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import PassResetForm from './components/auth/PassResetForm';
import UserProfile from './components/auth/UserProfile';
class App extends Component {
componentDidMount() {
store.dispatch(loadUser());
}
render() {
return (
<Router>
<Provider store={store}>
<div className="App">
<AppNavbar />
<Container>
<Route exact={true} path="/api/users/resetpassword/:resetLink" component={PassResetForm} />
<Route exact={true} path="/api/auth/:user" component={UserProfile} />
<StreamList />
</Container>
</div>
</Provider>
</Router>
);
}
}
export default App;
最后,/线路/api/streams.js
const express = require("express");
const router = express.Router();
const auth = require("../../middleware/auth");
// Item model
const Stream = require("../../models/Stream");
// @route GET api/streams
// @desc GET all Streams
// @access Private
router.get("/", (req, res) => {
console.log('router.get /streams')
Stream.find()
.sort({ date: -1 })
.then((streams) => res.json(streams));
// console.log(streams)
});
// @route POST api/streams
// @desc Create an stream
// @access Private
router.post("/", (req, res) => {
const newStream = new Stream({
title: req.body.title,
owner: req.body.owner,
serviceDate: new Date(req.body.serviceDate),
});
newStream.save().then((stream) => res.json(stream));
});
module.exports = router;
你会后悔的，因为这只是一个打字错误!您的组件正在接收this.props.stream(单数)而不是this.props.streams(复数)。