Question

在下面的代码中，您可以看到我的组件。编写方式将导致应用程序崩溃并显示错误：

未定义不是对象（评估this.props.data.ID）

因此在我的componentDidMount中，该id变量未接收道具数据。

但是，如果我注释掉componentDidMount中的代码，应用程序将正常加载，并且props.data.ID将在View中打印出来。为什么我无法在我的componentDidMount中访问props.data.ID？

在这里输入我的代码

// timeline.js
class TimelineScreen extends Component {

    constructor(props) {
        super(props);

        this.state = {
            posts: []
        }

    }

    componentDidMount() {
        const { id } = this.props.data.ID;

        axios.post('/api/hometimeline', { id })
        .then(res => {
            this.setState({
                posts: res.data
            });
        });
    }

    render() {
        const { data } = this.props;
        return (
            <View style={s.container}>

              {
                data
                ?
                <Text>{data.ID}</Text>
                :
                null
              }

            </View>
        );
    }
}

function mapStateToProps(state) {
    const { data } = state.user;
    return {
        data
    }
}

const connectedTimelineScreen = connect(mapStateToProps)(TimelineScreen);

export default connectedTimelineScreen;

Answer 1

mapStateToProps的输入不是反应状态，它是redux存储。您不应该在this.setState中使用componentDidMount。使用redux动作和reducer更改redux存储。每当Redux Store更改时，它将调用mapStateToProps并更新您的道具

仅在componentDidMount中未定义的道具

2 个答案: