我從 api 獲取輸出并將其存盤在一個狀態中setInfoMetrics(data.info);?
并將這個值放在input value| 該值顯示正確，但我無法更改該值
這是我的狀態：const [infoMetrics, setInfoMetrics] = useState([]);
useEffect(() => {
const fetchMetricsInfo = async () => {
try {
const { data } = await axios.get(
`API ADDRESS`,
{ headers: { Authorization: `Bearer ${token}` } }
);
setInfoMetrics(data.info);
} catch (error) {
console.error(error.message);
}
};
fetchMetricsInfo();
}, []);
這是我的輸入，我無法更改此值：
<div className="form-row">
<div className="col-md-12 mb-3">
<div className="titrExplain">Title</div>
<input
value={infoMetrics.summary_interpretation}
type="text"
className="form-control"
name="summary"
placeholder="Summary"
required
onChange={(e) => setSummary(e.target.value)}
/>
</div>
uj5u.com熱心網友回復：
//this is my sate :
const [infoMetrics, setInfoMetrics] = useState([]);
useEffect(() => {
const fetchMetricsInfo = async () => {
try {
const { data } = await axios.get(
`API ADDRESS`,
{ headers: { Authorization: `Bearer ${token}` } }
);
setInfoMetrics(data.info);
//case 1
//your summary functions
setSummary(/*what you want*/)
} catch (error) {
console.error(error.message);
}
};
fetchMetricsInfo();
}, []);
//Case2
//listening on infoMetrics changes and do something
useEffect(()=>{
//your summary functions
setSummary(/*what you want*/)
},[infoMetrics])
//THIS IS MY INPUT AND I CAN'T CHANGE THIS VALUE:
<div className="form-row">
<div className="col-md-12 mb-3">
<div className="titrExplain">Title</div>
<input
value={summary}
type="text"
className="form-control"
name="summary"
placeholder="Summary"
required
onChange={(e) => setSummary(e.target.value)}
/>
</div>
value 和 onChange, 的屬性應該是 useState 的同一個集合 [value,setValue]。Case1 和 Case2 選擇一個，它可能會起作用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521535.html
標籤：反应反应钩子