useEffect 中的函数运行一次，而我想同时运行[关闭]答案

【问题标题】：Function in useEffect runs once whereas I want to run concurrently [closed]useEffect 中的函数运行一次，而我想同时运行[关闭]
【发布时间】：2020-06-25 06:14:19
【问题描述】：

我有一个带有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(......);

我希望它立即在组件挂载时生成与数组长度一样多的字段。

【问题讨论】：

使用循环有什么意义？您是否正在尝试做一些视觉延迟？你只是想呈现腿数吗？
varies from an action performed previously on the application 是什么意思？
@NileshSingh 这意味着数组长度可以是 4、10、11 或任何数字。我对此无能为力。我只想生成匹配数组长度数 onComponentMount 的字段
我们知道我们从哪里得到这个数组吗？
@NileshSingh 它来自我的 redux 商店。数组不是问题。我使用作为参数来生成足够的字段。想象一个场景，我想为一个活动预订时段，我选择了 10 个人（这是legs） 参加，我希望能够在下一步中生成足够的输入字段来匹配号码，这样我就可以输入参加的 10 个人的姓名。

标签： javascript node.js reactjs react-hooks

【解决方案1】：

如果将[] 指定为dependency of useEffect，则它只会在组件挂载时运行一次。而是写成，

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

现在，length 中的每一次更改都会触发它

【讨论】：

即使这样，它仍然只生成2个字段。
这并不能解决问题，因为legs.length 的值永远不会改变。