Question

我有一个react组件（下面的摘要代码）。单击时，react组件应在屏幕上显示动画，然后将操作分派到redux服务器，然后将其远程存储。当远程服务器使用新事件更新客户端时，本地组件应从本地删除匹配的事件，并仅呈现其他用户拥有的事件数。

但是，我不知道如何从redux状态更新组件状态。我可以获得重复的事件，而且我知道要删除哪些事件。但是，如果我使用setSelfData更新状态，则它会变成无限循环，因为备忘录组件仍在旧的redux状态上进行更新，而该状态尚未清除。有没有办法使用钩子从redux状态更新本地状态？或者，最好具有处理按钮单击的传说以同时更新redux存储，以便在reducer中过滤掉后续通知，以便mapStateToProps仅接收要渲染的新事件？

type OwnProps = {
    className: string;
}

type ReduxStateProps = {
    widgetData: number[];
}

const MyPanel = React.memo<OwnProps & ReduxStateProps>(({ className, widgetData } ) => {
    const initialData = {
        selfWidgetData = [],
        animationsRequired = 0,
    };
    const [selfData, setSelfData] = useState<DataRenders>(initialData);
    const onButtonClick = () => {
        selfData.selfWidgetData.push(Date.now());
        selfData.animationsRequired = 1;
        setSelfData(selfData);
    };

    if(widgetData && widgetData.length > 0) {
        const {updatedSelfData, updatedAnimationsRequired} = filterDuplicateData(selfData.selfWidgetData, widgetData);
        setSelfData({
            selfWidgetData = updatedSelfData,
            animationsRequired = updatedAnimationsRequired,
        });
    }
    return (
        //render
    );
});

const mapStateToProps = ({...});
const mapDispatchToProps = ({...});
export default connect(mapStateToProps, mapDispatchToProps)(MyPanel);

Answer 1

您可以使用useEffect的第二个参数仅在widgetData属性更改时运行过滤和状态突变代码，以防止无限循环：

  useEffect(() => {
    if(widgetData && widgetData.length > 0) {
        const {updatedSelfData, updatedAnimationsRequired} = filterDuplicateData(selfData.selfWidgetData, widgetData);
        setSelfData({
            selfWidgetData: updatedSelfData, // note the change here as well from = to :
            animationsRequired: updatedAnimationsRequired,
        });
    }
  }, [widgetData]);

有关useEffect的更多信息，请参见https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects，并跳过第二个参数的效果。

反应：使用钩子从Redux状态中删除本地数据中的重复数据

1 个答案: