ReactJS Error输入是一个void元素标记，既不能有"children"，也不能使用&qu

Question

我有一个超级简单的React页面连接到NodeJS端点。我得到了这个错误"；未捕获错误：输入是一个void元素标记，既不能有children也不能使用dangerouslySetInnerHTML">

我尝试过SOF中发布的多种解决方案(在输入标签外放置标签、使用自关闭输入标签等(，但都无济于事。

EmailFaxDetails.js

import React, { useState } from 'react'
import FetchOrderDetails from './FetchOrderDetails';
import '../App.css';
const EmailFaxDetails = () => {
const [message, setMessage] = useState('');
const [isShown, setIsShown] = useState(false);
const handleChange = event => {
setMessage(event.target.value);
console.log(event.target.value);
};
const handleClick = event => {
event.preventDefault();
setIsShown(true);
console.log(message);

}
return(
<div>
<br></br>
<br></br>
Order Number: <input placeholder="Order Number" type="text" id="message" name="message" onChange={handleChange} value={message} autoComplete="off" />
<button onClick={handleClick}>Search</button>

{isShown && <FetchOrderDetails ord_no={message}/>}

</div>
)
}
export default EmailFaxDetails;

FetchOrderDetails.js

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import '../App.css';
const FetchOrderDetails = ({ord_no}) => {
const [data, setData] = useState([]);
const url = `http://localhost:5000/api/customerOrder/${ord_no}`
useEffect(() => {
axios.get(url)
.then(response => {
console.log(response.data)
setData(response.data)
})
.catch((err) => console.log(err));
}, [url]);
if(data) {
return(
<div>
{data.map((order) => (
<div key={order.ID}>
<br></br>
<br></br>
Sales Ack Email: <input placeholder="Sales Ack Email" id="salesAck">{order.cmt[0]}</input>
<br></br>
Invoice Email: <input placeholder="Invoice Email" id="salesInv">{order.cmt[1]}</input>
<br></br>
<br></br>
<div>
<button>Update</button>
</div> 
</div>
))}
</div>
)
}
return (
<h1>Something went wrong, please contact IT!</h1>
)
}
export default FetchOrderDetails;

App.js

import React from 'react';
import EmailFaxDetails from './components/EmailFaxDetails';
import './App.css';

function App() {
return (
<>
<EmailFaxDetails />
</>
);
}
export default App;

Answer 1

在FetchOrderDetails.js中

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

input元素是一个自关闭标记，不能包含子元素或文本。

如果要为input添加默认值，可以添加defaultValue属性。

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

或者添加value属性和onChange事件以更新值。