Question

在这个头像组件中，我希望在呈现之前将状态设置为匹配道具，但组件似乎只在其渲染功能中使用正确的道具进行更新。

例如

主要组件获取其componentDidMount上的数据，将该数据传递给另一个组件（阿凡达），“阿凡达”设置状态的数据以匹配传递的数据，UI呈现该数据。

默认情况下，redux商店的头像为avatar.png

class Account extends React.Component {

    componentDidMount() {
        this.props.fetchData();
    }

    render() {
        const { data } = this.props
        return(
            <Switch>
                <Route path="/avatar" exact={true} render={() => (<Avatar {...data} />)} />
            </Switch>
        )
    }
}

class Avatar extends React.Component { 

    constructor(props) {
        super(props)
        console.log('constructor', this.props)

        this.state = {}
    }

    componentDidMount() {
        console.log('componentDidMount', this.props)
        // this.setState({ data: this.props.data })
    }

    render() {
        console.log('render', this.props)
        return null
    }

}


constructor {avatar: "avatar.png"}
test.js:62 render {avatar: "avatar.png"}
test.js:58 componentDidMount {avatar: "avatar.png"}
test.js:62 render {avatar: "something.png", other: "stuff"}

Answer 1

这是因为您在呈现fetchData组件之前没有等待来自Avatar的数据。由于componentDidMount仅在登录时被调用一次，因此您只能看到正确的＆＃34;正确的＆＃34; render中的道具。

目前没有办法解决这个问题，但将来当React Suspense问世时，这将是一个轻微的问题。

Answer 2

在我们从React获得新的闪亮异步功能之前，我建议您在商店中创建一个新变量，您可以在fetchData操作完成之前和之后相应地设置并在渲染方法中使用它

class Account extends React.Component {

    componentDidMount() {
        this.props.fetchData();
    }

    render() {
        const { data, loadingComplete } = this.props

        return (
            loadingComplete === true
            ? <Switch>
                  <Route exact path="/avatar" render={() => (<Avatar {...data} />)} />
              </Switch>
            : 'Loading'
        )
    }
}

将redux道具传递给组件

2 个答案: