Question

当我使用propTypes和条件渲染子项时，我遇到了错误。

错误：Warning: Failed prop type: The prop 'rate' is marked as required in 'Rate', but its value is 'undefined'

// index.js
import React, { Component } from "react";
import { render } from "react-dom";
import Rate from "./components/Rate";
import Card from "./components/Card";

class App extends Component {
  state = {
    loading: true
  };

  componentDidMount() {
    setTimeout(() => this.setState({ loading: false, rate: 5 }), 5000);
  }

  render() {
    return (
      <Card loading={this.state.loading}>
        <Rate rate={this.state.rate} />
      </Card>
    );
  }
}

render(<App />, document.getElementById("root"));

// rate.js
import React from "react";
import PropTypes from "prop-types";

const Rate = ({ rate }) => (
  <div>
    <span>{rate}/10</span>
  </div>
);

Rate.propTypes = {
  rate: PropTypes.number.isRequired
};

export default Rate;

我在这里转载了我的错误： https://codesandbox.io/embed/qvx8q78ypw

我想仅在loading设置为false时才渲染子元素 编辑：我不明白为什么我在Rate组件上出现此错误，直到它被渲染
我不明白为什么会收到这个错误。

感谢您的帮助

Answer 1

您可以暂时使用默认道具值：

Rate.defaultProps = {
  rate: 0
};

你没有像@Cody Moniz在答案中所说的那样有条件地呈现卡片。你总是渲染它。可能在您的卡组件中，您隐藏或显示某些内容取决于您传递给它的装载道具。不要那样麻烦，只需正确使用条件渲染并稍微清理你的卡组件。

render() {
    return !this.state.loading && (
      <Card>
        <Rate rate={this.state.rate} />
      </Card>
    );
}

这里，如果React变为null或false，则不呈现任何内容。因此，当您的加载状态为false时，您将不进行任何渲染，在更改为true后，第二部分将进行评估并呈现您的组件。在使用逻辑&&运算符的第一部分为真之前，不评估第二部分。这是一种很好的干净方式来进行条件渲染，尤其是你想在第一个条件下不显示任何内容。

如果你想展示一些关于Card的东西（意思是渲染它）但只是有条件地渲染Rate组件，你可以在你的Card组件中应用这个逻辑，加载你的Card组件得到的支持。

Answer 2

<Rate>仍然在<App>中呈现，<Card>唯一能做的就是隐藏或显示传递给它的已经呈现的this.props.children元素。< / p>

Answer 3

您正尝试在<Rate />中加载rate道具，this.state.rate道具等于<App />。您的应用组件状态没有为this.state.rate设置任何内容，因此当<Rate />期望PropTypes.Number时，它实际上已获得undefined。这就是为什么它会抱怨。

要解决此问题，您可以将<App />的状态设置为：

state = {
  loading: true
  rate: 0,
};

React - prop-types被标记为必需

3 个答案: