无法将道具传递给子组件中的 componentDidMount (React)

Question

我在我的React 应用程序的子组件中将道具传递给componentDidMount() 调用时遇到问题。

在我的App.js 中，我通过Router 传递道具，如下所示：

App.js

class App extends Component {

state = {
    city: ""
}

componentDidMount() {
    this.setState({city: this.props.city});
}

render() {

    return (
        <div>
            <Route path="/" exact render = {() => <Projections city={this.state.city} />} />
            <Route path="/:id" component={FullPage} />
        </div>
    );
}

}

在我的 Projections.js 中，我有以下内容：

Projections.js

constructor(props) {
        super(props);
           this.state = {
            location: this.props.city
        }
    }

    componentDidMount () {
        console.log(this.state.location);
console.log(this.props.city);

    }

console.log(this.state);' returns an empty string.console.log(this.props.city);` 也会返回一个空字符串。

但我需要访问componentDidMount() 中的city 属性的值。 console.log(this.props.city); 在 render() 内返回道具，但不在 componentDidMount() 内

这是为什么以及如何在 componentDidMount() 内返回 props？

Answer 1

在构造函数中你应该引用props，而不是this.props：

location: props.city

Answer 2

        <Route path="/" exact render = {() => <Projections city={this.state.city} {...this.props} />} />

尝试在路线中传递其余的道具

这是因为您在 constructor 中分配了道具，当时它可能会或可能不会收到实际价值。它在组件生命周期中只被调用一次。 你可以使用componentWillReceiveProps 来获取 props，只要它接收到并相应地更新状态。

内部 Projections.js

UNSAFE_componentWillReceiveProps(nextProps){
   if(nextProps.city){
     this.setState({location:nextProps.city})
   }
}

这里正在工作codesand