{lines.map(line => {
  {line}
})}

它不起作用，因为在map函数中没有return语句。你可以这样写：

{lines.map(line => {
  return line
})}

由于此时map函数没有改变任何内容，因此您可以使用原始数组。

{lines}

但我强烈建议不要在react状态下存储元素。在当前示例中，您没有任何 prop ，但是一旦您这样做，就会非常容易出现由过时 prop 引起的bug。
相反，您的状态应该是描述页面所需的最小数据量，然后应该在呈现期间创建元素。例如，如果每行都有一些相关的数据，继续使用数组，但只存储数据而不是元素：

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

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

  return (
    <div>
      <form>
        {lines.map(line => {
          return <Lines name={line.name} />
        })}
      </form>
      <button onClick={addLine}>
      </button>
    </div>
  );
};

或者，如果没有关于每一个的数据，那么您可以将状态更改为只是一个数字：

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

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

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

return (
  <div>
    <form>{lines}</form>
    <button onClick={addLine}></button>
  </div>
);