React报错：input是void元素标签，不可含children或用dangerouslySetInnerHTML

错误根源 #

你的报错完全来自FetchOrderDetails.js中的两个input标签写法：

Sales Ack Email: <input placeholder="Sales Ack Email" id="salesAck">{order.cmt[0]}</input>
Invoice Email: <input placeholder="Invoice Email" id="salesInv">{order.cmt[1]}</input>

在React（以及HTML规范）中，<input>是空元素（void element），它不能包含子节点（也就是不能用闭合标签包裹内容），必须通过value属性来设置输入框的显示值。

修复代码 #

把上述两行代码修改为自闭合标签，并添加value属性绑定数据：

Sales Ack Email: <input placeholder="Sales Ack Email" id="salesAck" value={order.cmt[0]} />
Invoice Email: <input placeholder="Invoice Email" id="salesInv" value={order.cmt[1]} />

额外优化建议 #

• 如果需要让输入框可编辑，建议给input添加onChange事件来更新状态，否则输入框会处于只读状态（因为value被固定绑定了order.cmt的值）。
• 初始状态const [data, setData] = useState([]);，当接口还没返回数据时，data是一个空数组，if(data)判断会一直为true，导致渲染空的map循环。可以改成if(data.length > 0)来避免这种情况。

内容的提问来源于stack exchange，提问作者Glenn94