0

我有一个 React（版本使用 16.8）组件，我有一个const updateDiffText = useCallback(()点击锚点GENERATE DIFFonclick的回调我回调onClick={updateDiffText}这个updateDiffText

我的要求是我不想在我的 UI 中有一个锚代码，只要我有，我就想要oldText它newText应该触发方法updateDiffText并显示结果。用户不应单击锚链接来执行此操作。

我的代码沙箱在这里 - https://codesandbox.io/s/react-diff-view-demo-htp06 如果我在 oldtext 和 newText 中有值，它应该调用 updateDiffText 这个方法

我的代码 -

const DiffViewer = props => {
    const oldText = useInput(props.startupConfigData);
    const newText = useInput(props.runningConfigData);
    const [{ type, hunks }, setDiff] = useState("");
    const updateDiffText = useCallback(() => {
        const diffText = formatLines(diffLines(oldText.value, newText.value), {
            context: 3
        });
        const [diff] = parseDiff(diffText, { nearbySequences: "zip" });
        setDiff(diff);
    }, [oldText.value, newText.value, setDiff]);

    const tokens = useMemo(() => tokenize(hunks), [hunks]);

    return (
        <div style={{ height: "450px", overflow: "auto" }}>
            <a href="#" onClick={updateDiffText}>
                GENERATE DIFF
            </a>

            {setDiff ? (
                <Diff
                    viewType="split"
                    diffType={type}
                    hunks={hunks || EMPTY_HUNKS}
                    tokens={tokens}
                >
                    {hunks => hunks.map(hunk => <Hunk key={hunk.content} hunk={hunk} />)}
                </Diff>
            ) : (
                ""
            )}
        </div>
    );
};

如果查询不清楚，请告诉我。谢谢。

4

2 回答 2

1

尝试使用 useEffect 而不是 useCallback。在您的情况下，您没有在渲染阶段调用 memoized 函数。useCallback 将返回一个记忆函数。检查修改后的版本。

  1. https://codesandbox.io/s/react-diff-view-demo-izdyi
于 2019-09-20T07:11:08.313 回答
1 
const updateDiffText = useCallback(() => {
    const diffText = formatLines(diffLines(oldText.value, newText.value), {
        context: 3
    });
    const [diff] = parseDiff(diffText, { nearbySequences: "zip" });
    setDiff(diff);
}, [props.startupConfigData, props.runningConfigData]);

至

const updateDiffText = useCallback(() => {
    const diffText = formatLines(diffLines(oldText.value, newText.value), {
        context: 3
    });
    const [diff] = parseDiff(diffText, { nearbySequences: "zip" });
    setDiff(diff);
}, [oldText.value, newText.value, setDiff]);

//////////////////////////////////////////////////////////////////////////////////////// ////// 我建议的新解决方案 /////////////////////////////

const updateDiffText = () => {
// do what you wanna do 
}

并像这样使用 useEffect 而不是 useCallback

useEffect(() => {
   updateDiffText();
},[props.startupConfigData, props.runningConfigData])
于 2019-09-20T06:38:26.693 回答