对传递的redux道具进行反应

Question

Within this Avatar component, I want to set the state to match the props before it renders but the component only seems to update with the correct props in its render function.

eg.

main component gets data on its componentDidMount, passes that data to another component (Avatar), Avatar sets the state's data to match the passed data, UI renders with that data.

by default the redux store has avatar as 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

This happens because you're not waiting for the data from fetchData before rendering your Avatar component. Since componentDidMount is only called once, on mount, it makes sense that you're only seeing your "correct" props in render .

Currently there is no way around this but in the future when React Suspense comes out this will be a slight non-issue.

Answer 2

Until we get the new shiny async features from React, I'd suggest creating a new variable in your store that you can set accordingly before and after your fetchData action completes and use it in your render method

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'
        )
    }
}