Question

默认情况下，我希望我的lastMessage道具是一个带有id的对象。但是使用下面的代码，它会显示为null。

代码：

const App = ({ lastMessage }) => { // lastMessage is currently null

    return (
        <Message lastMessage={lastMessage} />
    )
}

class Message extends Component {

    constructor(props) {
        super(props)
    }

    componentWillReceiveProps(nextProps) {
        const data = [];

        if (nextProps.lastMessage.id !== this.props.lastMessage.id) {
            log.debug('woohoo');
            // do something ...
        }
    }

    render() {

        return (
            // something...
        );
    }
}

Message.defaultProps = {
    lastMessage: {
        id: 0,
    },
};

在我的App组件中，我将lastMessage作为null传递给Message组件。但我在defaultProps组件中设置Message：

Message.defaultProps = {
    lastMessage: {
        id: 0,
    },

我希望lastMessage是一个具有id的对象，但它仍然是null。然后我的应用崩溃，因为如果nextProps.lastMessage.id为lastMessage

，则null无法正常工作

如果我删除了我的App组件中的lastMessage道具，那就更奇怪了：

const App = () => {

    return (
        <Message />
    )
}

然后，Message组件将lastMessage defaultProp创建为具有id的对象。

如果我的道具是null，我试图用默认值传递它。我试过这样的东西，但它仍然不起作用：

const App = ({ lastMessage = { id: 0 } }) => { // lastMessage is still null

    return (
        <Message lastMessage={lastMessage} />
    )
}

我没有正确设置defaultProps吗？

Answer 1

如果您将null传递给Message组件，则基本上会覆盖默认属性 - lastMessage。如果我理解正确，那么当您将lastMessage传递给Message组件时，它就可以正常工作。它应该保持这种状态。

在将参数传递给组件之前，您可以进行三元真实性检查：

<Message lastMessage={lastMessage ? lastMessage : undefined} />

正如您所知，您也可以通过这种方式传递默认道具：

<Message lastMessage={lastMessage ? lastMessage : { id: 0 }} />

React defaultProps无法按预期工作

1 个答案: