возможно ли получить реквизит и передать его в качестве параметра функции? - PullRequest
Новая
       9

возможно ли получить реквизит и передать его в качестве параметра функции?

0 голосов
/ 19 января 2020

Я пытаюсь получить реквизит от MapsStateToProps через соединение response-redux, а затем передать его дочернему компоненту. Эта опора используется в качестве аргумента для функции, функция отвечает за возвращение чего-либо, после чего что-то становится состоянием дочернего компонента.

Я знаю, что реквизиты обновляются, потому что они отображаются в дочерний компонент, однако в том месте, где он используется в качестве аргумента, он не обновляется сразу. Я должен перейти к другому компоненту (реакции-маршрутизаторы), а затем вернуться к исходному компоненту, чтобы увидеть желаемый результат в результате функции с использованием реквизита.

Есть ли способ, чтобы изменение произошло, не переходя на другой компонент, а затем возвращаясь? Очевидно, я делаю что-то не так, или , что я пытаюсь сделать, не так ли? Любые советы? 

import React, { Component } from 'react';
import {connect} from "react-redux";
import filterData from "../../States/AllStates/filterData"
import BookComponent from "./BookComponent";

const mapStateToProps = state => { 
    return {
    fmlProps: state.ReducerName.fmlProps
    }
};

class Testing extends Component {
    state = {
        // this.props.fmlPropsdoesn't work right away. You need to go away then come back 
        // to see the desired result, which I want to avoid
        XXX: filterData(this.props.fmlProps) 
    }
    render() { 
        return (
            <>

            <h1>{this.props.fmlProps}</h1> {/* this show up correct */}

            {this.state.XXX.map(FakeData => (
            <BookComponent
            key={FakeData.planNumber}
            PNum={FakeData.planNumber}
            PName={FakeData.planName}
            />))}

            </>
        );
    }
}

export default connect(mapStateToProps, null) (Testing);

1 Ответ

1 голос
/ 19 января 2020

Используйте componentDidUpdate для проверки и вызова функции после обновления компонента. 

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.fmlProps !== prevProps.fmlProps) {
    //invoke function and setstate
    const tmp =  XXX: filterData(this.props.fmlProps) 
    this.setState({XXX})
  }
}

Подробнее читайте здесь - https://reactjs.org/docs/react-component.html#componentdidupdate

...