Question

我在Class组件中缓存数据的方式如下： 1.在componentDidMount中进行异步API调用 2.通过redux获取API响应并调度数据 3.通过将状态映射到道具来使用响应数据

我想要做的是在获得具有映射的redux状态值的API响应后立即缓存数据函数组件中useEffect的内部（它适用于类组件。但我想知道如何在功能组件中使用它

export class MyClassComponent extends React.Component {
    private readonly _myCachedData = {
         'data1': {}
    }

    public async componentDidMount() {
        await this.loadAsyncData();
    }

    private loadAsyncData() {
        const { makeAPICall } = this.props
        await makeAPICall();
        return this._myCachedData.data1 = this.props.data1FromReduxConnect;
    }
}

export const mapStateTopProps = (state) => {
    const { data1FromReduxConnect } = state;
    return data1FromReduxConnect;
}
...

我尝试过的：

export const MyFunctionComponent = props => {
    const { data1FromReduxConnect } = props;
    const myCachedData = React.useRef();
    const loadAsyncData = () => {
        const { makeAPICall } = this.props
        await makeAPICall();
        return myCachedData.current = data1FromReduxConnect;
    }
    React.useEffect(()=> {
        await loadAsyncData();
    })

}

export const mapStateTopProps = (state) => {
    const { data1FromReduxConnect } = state;
    return data1FromReduxConnect;
}

我只能获取data1FromReduxConnect的先前值，这与类组件在API调用后确实获得了更新的值this.props.data1FromReduxConnect

不确定我是否应该仅保留类组件，或者有没有办法解决此问题！谢谢！

Answer 1

我认为这不是使用useRef挂钩的正确方法。与React的类组件的createRef()类似，它实际上用于访问功能组件中的DOM。

如果初始化MyFunctionComponent时HTTP请求仅发生一次，我们可以将[]用作useEffect钩子中的第二个参数，这将导致该效果为{{3} }。另外，我们将需要使用run only once钩子来跟踪组件状态，该状态将通过redux存储中的值进行更新。

export const MyFunctionComponent = props => {
    const { data1FromReduxConnect } = props;
    const [ myData, setMyData ] = useState();

    const loadAsyncData = async() => {
        const { makeAPICall } = this.props
        await makeAPICall();
    }

    useEffect(()=> {
      async function getData() {
        await loadAsyncData();
      }
      getData();
      // do the rest to get and store data from redux
      setMyData(data1FromReduxConnect);
    }, [])

}

有没有一种方法可以使用useRef（）在React函数组件中缓存来自redux connect的数据？

1 个答案: