我正在使用 React v4,我试图在页面“treinamentos”中列出一个数组,但在加载页面时出现错误:
Failed prop type: The prop
treinamentos
is marked as required inTreinamentos
, but its value isundefined
.
我在这里错过了什么?是因为我使用的版本吗?
治疗:
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;
最佳答案
当您从 treinamentos
reducer 请求状态时,您肯定会收到一个空对象,您应该检查您的 reducer,将 treinamentos 作为一个空数组作为初始状态返回(或者您的业务逻辑需要的任何内容) .
关于javascript - 失败的 Prop 类型 Prop 被标记为必需但其值为 `undefined`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49802165/