Mongodb 我的道具价值为'；溪流'；总是未定义的_Mongodb_Redux_React Redux_React Router_Axios

Mongodb 我的道具价值为'；溪流'；总是未定义的

mongodb redux

Mongodb 我的道具价值为'；溪流'；总是未定义的,mongodb,redux,react-redux,react-router,axios,Mongodb,Redux,React Redux,React Router,Axios,我发现无论我做什么，我对this.props.streams的值总是未定义的。我已经确认后端API在查询时返回值。示例输出： { "welcome": "Livestream service", "livestreamURL": "https://", "replayURL": "https://", &q

我发现无论我做什么，我对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
    }
]

无论我尝试什么，我似乎都无法将结果填充到道具中。我有以下相关文件：

客户端/src/components/StreamList.js：（问题所在）

/client/stc/reducers

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,
  };
};

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;
  }
}

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;

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;

/client/src/App.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,
  };
};

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;
  }
}

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;

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

（复数）。

我确实收到了，因为看起来这就是它。谢谢琳达给我第二双眼睛，并找到了这个。：）