javascript - 是否可以获取 props 并将其作为参数传递给函数？

Question

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

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

有没有办法让更改发生而无需转到另一个组件然后再返回？显然我做错了什么，或者我想做的不是 react 方式？有什么建议吗？

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