Устранение неполадок в компоненте Component в дочернем компоненте (React)

У меня возникли проблемы с передачей componentDidMount()запроса в дочернем компоненте моего Reactприложения.

В моем App.jsя прохожу Router, как показано ниже: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> ); } }

App.js

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

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

    }

В моем Projections.js у меня есть следующее:

Projections.js

console.log(this.state);' returns an empty string.

cityconsole.log (this.componentDidMount (). console.log (this.props.city);); `также возвращает пустую строку.

Но мне нужно получить доступ к значению cityопоры внутри render(). componentDidMount()в пределах propsвозвращает опору, но не вcomponentDidMount()

Почему это и как я возвращаюсь propsвнутри props?

javascript,reactjs,

0

Ответов: 2


3

В this.props вы должны ссылаться props, а не :location: props.city

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

1
constructor

Попробуйте проехать остальную часть реквизита в пути

это потому, что вы назначили реквизиты в constructorэто время, они могут получать или не получать фактическое значение. И он вызывается только один раз в жизненном цикле компонента. Вы можете использовать, componentWillReceivePropsчтобы получить реквизит, когда он получает и обновляет состояние соответственно.

Внутри Projections.js

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

Вот рабочие коды и

JavaScript, reactjs,
Похожие вопросы