Question

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

在我的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）;`也会返回一个空字符串。

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

这是为什么，如何在props中返回componentDidMount()？

Answer 1

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

location: props.city

Answer 2

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

尝试沿路线传递其余道具

这是因为那时您在constructor中分配了道具，所以它可能会或可能不会收到实际值。而且它在组件生命周期中仅被调用一次。您可以在componentWillReceiveProps接收道具并相应更新状态时使用它。

在 Projections.js

内部

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

这里在工作codesand

无法将道具传递到子组件中的componentDidMount（反应）

2 个答案: