Question

我有这个问题，第一次渲染我的组件时，在 for 循环（或 array.map 函数）中运行的任何内容都被完全忽略。第二次它按预期运行。

const myFunctionalComponent = () => {
    const initialValue = ['RU'];
    const map = useRef(null);
    const [selected, setSelected] = useState(initialValue);
    useEffect(() => {
        setSelected(initialValue);
        const allPaths = map.current.container.getElementsByTagName('path'); // the array to iterate over
        Array.prototype.map.call(allPaths, path => console.log(path.id));  // ignored on 1st render ONLY
        console.log(allPaths);
        console.log(selected);
    }, []);
    return (
        <Whatever ref={map} />
    );
}

我尝试了多个版本，包括 for 循环和硬编码我的数组，而不是从子组件使用 useref 获取它。它适用于更短的阵列，但这不会成为问题，对吗？

我也尝试将 allPaths 变量转换为数组而不是集合，但无济于事。

Answer 1

您应该在 const initialValue = ['RU']; 上方定义 myFunctionalComponent。所以，useEffect 获取页面渲染时的初始值。

Answer 2

我意识到问题出在哪里。我没有尝试在此处遍历 HTML 集合，而是决定在 Whatever 组件中遍历它。

这是一个 ReactSVG 组件，我可以使用 afterInjection 函数在循环中执行我想要的任何操作。

For 循环无法在 useEffect() 中进行第一次渲染

2 个答案: