时间戳

首页 > 解决方案 > useEffect 中的函数运行一次，而我想同时运行

javascript - useEffect 中的函数运行一次，而我想同时运行

问题描述

我有一个数组，length === 4 请注意，长度可能会因一些外部参数而异。我想运行一个函数，该函数使用 useEffect 根据我的数组 onComponentDidMount 的长度生成输入字段。

const [blankField, setBlankField] = useState([dynamicFields]); // This adds the input fields with the required data

const legs = [{...}, {...}, {...}, {...}]; // the length of legs[] may vary in number

const addField = () => {
        setBlankField([...blankField, [...dynamicFields]]);
    };

    useEffect(() => {
        if (legs) {
            legs.map(leg => {
                console.log(leg);
                return addField();
            });
        }
    }, []);

blankFields.map(......);

我希望它立即生成与组件安装的数组长度一样多的字段。

标签： javascriptnode.jsreactjsreact-hooks

解决方案

如果你给[]as dependency of useEffect，它只会在组件安装时运行一次。而是将其写为，

  useEffect(() => {
    if (legs) {
      legs.map(leg => {
        setCount([count + 1]);
        console.log(count, leg);
        return addField();
       });
    }
  }, [legs.length]);

现在，它会在每次更改时触发length

推荐阅读