使用useState将组件存储为数组

huangapple go评论60阅读模式
英文:

Using useState for storing components as array

问题

在点击按钮后,我想在表单中添加新行。我已经创建并导入了Lines组件,现在在点击按钮后,我想在表单中添加1行。

我已经能够编写这个代码。但是这不起作用,甚至不会显示错误。我不知道如何修复它。

useState是一个空数组,在点击按钮后,我想添加并存储新的组件。

谢谢

const Form = () => {
  const [lines, setLines] = useState([]);

  const addLine = () => {
    setLines(lines => [...lines, <Lines />]);
  };

  return (
    <div>
      <form>
        {lines.map((line, index) => (
          <div key={index}>{line}</div>
        ))}
      </form>
      <button onClick={addLine}></button>
    </div>
  );
};
英文:

after clicking on button I want add new line into form.
I created and imported Lines component and now after clicking on button I want add 1 into form.

I was able wrote this. But this doesnt work, it will not even show error. and I have no idea how to fix it.

useState is empty array, and after clicking button I wanna add and store new <Lines /> component.

Thank you

const Form = () =&gt; {
  const [lines, setLines] = useState([]);

  const addLine = () =&gt; {
    setLines(lines =&gt; [...lines, &lt;Lines /&gt;]);
  };

  return (
    &lt;div&gt;
      &lt;form&gt;
        {lines.map(line =&gt; {
          {line}
        })}
      &lt;/form&gt;
      &lt;button onClick={addLine}&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  );
};

答案1

得分: 0

&gt; {lines.map(line =&gt; {
&gt;   {line}
&gt; })}

这段代码没有正常工作,因为在你的 map 函数中没有返回语句。你应该这样写:

{lines.map(line =&gt; {
  return line;
})}

而且,由于此时 map 函数没有做任何改变,你可以直接使用原始数组:

{lines}

但我建议你不要将元素存储在 React 状态中。在当前示例中,你没有任何 props,但一旦有了 props,就很容易因为过期的 props 导致 bug。

相反,你的状态应该是描述页面所需的最小数据量,然后在渲染期间创建元素。例如,如果每行都有一些关联的数据,可以继续使用数组,只存储数据而不是元素:

const Form = () =&gt; {
  const [lines, setLines] = useState([]);

  const addLine = (name) =&gt; {
    setLines(lines =&gt; [...lines, { name }]);
  };

  return (
    &lt;div&gt;
      &lt;form&gt;
        {lines.map(line =&gt; {
          return &lt;Lines name={line.name} /&gt;
        })}
      &lt;/form&gt;
      &lt;button onClick={addLine}&gt;&lt;/button&gt;
    &lt;/div&gt;
  );
};

或者,如果没有有关每行的数据,那么你可以将状态更改为仅仅是一个数字:

const [numLines, setNumLines] = useState(0);

const addLine = () =&gt; {
  setNumLines((prev) =&gt; prev + 1);
};

const lines = [];
for (let i = 0; i &lt; numLines; i++) {
  lines.push(&lt;Lines /&gt;);
}

return (
  &lt;div&gt;
    &lt;form&gt;{lines}&lt;/form&gt;
    &lt;button onClick={addLine}&gt;&lt;/button&gt;
  &lt;/div&gt;
);
英文:

>
&gt; {lines.map(line =&gt; {
&gt; {line}
&gt; })}
&gt;

It's not working because you have no return statement in your map function. You would write this as:

{lines.map(line =&gt; {
  return line
})}

And since at that point the map function isn't changing anything, you can just use the original array.

{lines}

But i would urge you not to store elements in react state. You don't have any props in the current example, but as soon as you do it will become extremely easy to have bugs caused by stale props.

Instead, your state should be the minimum amount of data needed to describe the page, and then the elements should be created during render. For example, If each line has some data associated, continue to use an array but just store the data not the elements:

const Form = () =&gt; {
  const [lines, setLines] = useState([]);

  const addLine = (name) =&gt; {
    setLines(lines =&gt; [...lines, { name }]);
  };

  return (
    &lt;div&gt;
      &lt;form&gt;
        {lines.map(line =&gt; {
          return &lt;Lines name={line.name} /&gt;
        })}
      &lt;/form&gt;
      &lt;button onClick={addLine}&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  );
};

Or if there's no data about each one, then you could change the state to be just a number:

const [numLines, setNumLines] = useState(0);

const addLine = () =&gt; {
  setNumLines((prev) =&gt; prev + 1);
};

const lines = [];
for (let i = 0; i &lt; numLines; i++) {
  lines.push(&lt;Lines /&gt;);
}

return (
  &lt;div&gt;
    &lt;form&gt;{lines}&lt;/form&gt;
    &lt;button onClick={addLine}&gt;&lt;/button&gt;
  &lt;/div&gt;
);

huangapple
  • 本文由 发表于 2023年6月25日 22:34:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/76550911.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定