时间戳

首页 > 解决方案 > 是否有可能获取道具并将其作为参数传递给函数？

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

问题描述

我试图通过 react-redux 的连接从 MapsStateToProps 获取道具，然后将其传递给子组件。该道具用作函数的参数，该函数负责返回某些内容，然后该内容成为子组件的状态。

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

有没有办法让改变发生而不去另一个组件然后回来？显然我做错了什么，或者我想做的不是反应方式？有小费吗？

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

标签： javascriptreactjsreduxaxiosreducers

解决方案

当组件更新时，使用 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

推荐阅读