是否有可能获得道具并将其作为参数传递给函数？

Question

我正在尝试通过 react-redux 的连接从 MapsStateToProps 获取道具，然后将其传递给子组件。这个 prop 被用作函数的参数，函数负责返回一些东西，然后那个东西成为子组件的状态。

我知道道具正在更新，因为我将它显示在子组件中，但是在它用作参数的地方它不会立即更新。我必须导航到另一个组件（react-routers），然后返回到原始组件以查看使用 props 的函数的预期结果。

有没有一种方法可以在不转到另一个组件然后再返回的情况下进行更改？显然我做错了什么，或我想做的不是反应方式吗？有什么建议吗？

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);

Answer 1

使用 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

是否有可能获得道具并将其作为参数传递给函数？

is it possible, to get a props and pass it as a parameter to a function?

javascript

reducers

reactjs

redux

axios