【问题标题】:Failed prop type The prop is marked as required but its value is `undefined`失败的道具类型道具被标记为必需,但其值为“未定义”
【发布时间】:2018-09-22 22:30:49
【问题描述】:

我正在使用 react v4,我正在尝试在页面“treinamentos”中列出一个数组,但在加载页面时出现错误:

失败的道具类型:道具treinamentosTreinamentos,但其值为undefined

我在这里缺少什么?是因为我使用的版本吗?

议会:

import React from 'react';
import TreinamentosList from './TreinamentosList';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

class Treinamentos extends React.Component {
  render() {
    return (
      <div>
        Treinamentos
        <TreinamentosList treinamentos={this.props.treinamentos} />
      </div>
    );
  }
}

Treinamentos.propTypes = {
  treinamentos: PropTypes.array.isRequired
}

function mapStateToProps(state) {
  return {
    treinamentos: state.treinamentos
  }
}

export default connect(mapStateToProps)(Treinamentos);

TreinamentosList:

import React from 'react';
import PropTypes from 'prop-types';

export default function TreinamentosList({ treinamentos }) {
  const emptyMessage = (
    <p>Adicione um treinamento</p>
  );

  const treinamentosList = (
    <p>treinamentos list</p>
  );

  return (
    <div>
      {treinamentos.length === 0 ? emptyMessage : treinamentosList}
    </div>
  );
}

TreinamentosList.propTypes = {
  treinamentos: PropTypes.array.isRequired
}

AppRouter:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Greetings from './components/Greetings';
import SignUp from './components/singup/SignUp';
import NoMatch from './components/NoMatch';
import Treinamentos from './components/Treinamentos';
import NavigationBar from './components/NavigationBar';

const AppRouter = () => (
  <Router>
    <div className="container">
      <NavigationBar />
      <Switch>
        <Route path="/" component={Greetings} exact={true}/>
        <Route path="/signup" component={SignUp}/>
        <Route path="/treinamentos" component={Treinamentos}/>
        <Route component={NoMatch}/>
      </Switch>
    </div>
  </Router>
);

export default AppRouter;

【问题讨论】:

  • 你有注册的Reducer名为'treinamentos'吗?
  • @QuarK 就是这样,我忘了减速器,谢谢

标签: javascript reactjs react-redux


【解决方案1】:

当您从treinamentosreducer 请求状态时,您肯定会收到一个空对象,您应该检查您的reducer,将 treinamentos 作为一个空数组作为初始状态(或您的业务逻辑需要的任何内容)返回。

【讨论】:

    猜你喜欢
    • 2019-06-25
    • 2018-11-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-17
    • 1970-01-01
    • 2020-12-24
    • 2017-12-11
    相关资源
    最近更新 更多