設想 -
文本欄位中的默認輸入數字 - 1
列出的專案 -
- 1
- 6
- 11
現在，只要我從文本欄位中洗掉1 -
列出專案 -
- 鈉
- 鈉
- 鈉
現在在輸入欄位中輸入4 。
列出專案 -
- 鈉
- 鈉
- 4
- 9
- 14
預期行為 -
串列項應該只顯示 -4, 9 and 14而不是NaN, NaN, 4, 9, 14.
讓我知道我在這里做錯了什么。
代碼 -
import React, { useState } from "react";
import List from "./List";
const ReRendering = () => {
const [number, setNumber] = useState(1);
const getList = () => [number, number 5, number 10];
return (
<div>
<input
type="number"
value={number}
onChange={(e) => setNumber(parseInt(e.target.value, 10))}
/>
<div>
<List getList={getList} />
</div>
</div>
);
};
export default ReRendering;
List.js
import { useEffect, useState } from "react";
const List = ({ getList }) => {
const [item, setItem] = useState([]);
useEffect(() => {
setItem(getList());
}, [getList]);
return (
<div className="list">
{item.map((x) => (
<div key={x}>{x}</div>
))}
</div>
);
};
export default List;
作業示例 - https://codesandbox.io/s/gallant-gagarin-l18ni1?file=/src/ReRendering.js:0-463
uj5u.com熱心網友回復：
DoingsetNumber(parseInt(e.target.value, 10))會將數字狀態設定為NaN如果輸入欄位為空，因為空字串不能為parseIntd。
console.log(parseInt(''));NaN 會導致問題，因為正如 React 警告所說：
警告：遇到兩個孩子用同一個鑰匙，
NaN。密鑰應該是唯一的，以便組件在更新時保持其身份。非唯一鍵可能會導致子項被復制和/或省略——這種行為不受支持，并且可能在未來的版本中發生變化。
重復的 NaN 會導致重復的鍵。
相反，valueAsNumber如果值不存在，請使用 , 并替換為 0。
const { useState, useEffect } = React;
const ReRendering = () => {
const [number, setNumber] = useState(1);
const getList = () => [number, number 5, number 10];
return (
<div>
<input
type="number"
value={number}
onChange={(e) => setNumber(e.target.valueAsNumber || 0)}
/>
<div>
<List getList={getList} />
</div>
</div>
);
};
const List = ({ getList }) => {
const [item, setItem] = useState([]);
useEffect(() => {
setItem(getList());
}, [getList]);
return (
<div className="list">
{item.map((x) => (
<div key={x}>{x}</div>
))}
</div>
);
};
ReactDOM.render(<ReRendering />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>構建它的更好方法是getList立即在子行程中呼叫，而不是在其中使用單獨的狀態和效果掛鉤。
const { useState, useEffect } = React;
const ReRendering = () => {
const [number, setNumber] = useState(1);
const getList = () => [number, number 5, number 10];
return (
<div>
<input
type="number"
value={number}
onChange={(e) => setNumber(e.target.valueAsNumber || 0)}
/>
<div>
<List getList={getList} />
</div>
</div>
);
};
const List = ({ getList }) => (
<div className="list">
{getList().map((x) => (
<div key={x}>{x}</div>
))}
</div>
);
ReactDOM.render(<ReRendering />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>uj5u.com熱心網友回復：
進行以下更改，它應該會產生您正在尋找的內容。
它基本上考慮輸入為空的情況，并告訴它在沒有提供輸入時不顯示。
List.js
import { useEffect, useState } from "react";
const List = ({ getList }) => {
const [item, setItem] = useState([]);
useEffect(() => {
setItem(getList());
}, [getList]);
return (
<div className="list">
{item ? item.map((x) => ( // changes
<div key={x}>{x}</div>
)):""}
</div>
);
};
export default List;
重新渲染.js
import React, { useState } from "react";
import List from "./List";
const ReRendering = () => {
const [number, setNumber] = useState(1);
const getList = () => {
if(number === ""){ // changes
return;
}
return [number, number 5, number 10];
};
return (
<div>
<input
type="number"
value={number}
onChange={(e) => {
if (e.target.value !== "") { //changes
setNumber(parseInt(e.target.value, 10));
} else {
setNumber("");
}
}}
/>
<div>
<List getList={getList} />
</div>
</div>
);
};
export default ReRendering;
uj5u.com熱心網友回復：
我認為這是因為空輸入的值是一個parseInt不知道如何處理的空字串，因此回傳NaN。我認為您需要創建一個處理該問題的函式，如果輸入的值為空字串，則將狀態設定為 0。就像是：
const handleChange = (e) => {
const value = e.target.value;
setNumber(value === '' ? 0 : Number(value));
}
另外我想我應該讓你知道你不需要你的useStateanduseEffect在<List />組件中。無論如何，您的串列都會在道具更改時更新，因此您可以像這樣進行映射：getList().map(...rset of the code)
uj5u.com熱心網友回復：
我相信@CertainPerformance已經回答了你的 -
讓我知道我在這里做錯了什么。
查看您0對輸入欄位中零問題的具體評論，我認為您可以getList()通過數字檢查修改您的方法，如果數字為空白，則傳遞空白陣列。
改變你的getList()方法 -
const getList = () => number ? [number, number 5, number 10] : [];
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/455410.html
標籤：javascript html css 反应 反应使用回调