目標：
我的 React Native App 顯示<Button />基于 Object 串列中的值的串列someData。一旦用戶按下 a <Button />，應用程式應顯示text與此關聯的<Button />。我正在嘗試使用條件渲染來實作這一點。
行動：
所以首先，我useEffect用來加載 to 的Boolean串列showItems。showItems并且將具有相同的someData索引，因此我可以text使用.<Button />index
錯誤：
條件渲染不反映最新state的showItems.
代碼：
這是我的代碼示例
import {someData} from '../data/data.js';
const App = () => {
const [showItems, setShowItems] = useState([]);
useEffect(() => {
const arr = [];
someData.map(obj => {
arr.push(false);
});
setShowItems(arr);
}, []);
const handlePressed = index => {
showItems[index] = true;
setShowItems(showItems);
//The list is changed.
//but the conditional rendering does not show the latest state
console.log(showItems);
};
return (
<View>
{someData.map((obj, index) => {
return (
<>
<Button
title={obj.title}
onPress={() => {
handlePressed(index);
}}
/>
{showItems[index] && <Text>{obj.item}</Text>}
</>
);
})}
</View>
);
};
uj5u.com熱心網友回復：
showItems[index] = true;
setShowItems(showItems);
React 的設計假設狀態是不可變的。當您呼叫 setShowItems 時，react 會===在舊狀態和新狀態之間進行一個操作，并看到它們是同一個陣列。因此，它得出的結論是沒有任何變化，并且不會重新渲染。
您需要創建一個新陣列，而不是改變現有陣列：
const handlePressed = index => {
setShowItems(prev => {
const newState = [...prev];
newState[index] = true;
return newState;
});
}
uj5u.com熱心網友回復：
這是因為 react 沒有識別出您的陣列已更改。基本上，當您定義陣列時，react 會為其分配一個參考。但是，盡管您正在更改陣列中的值，但不會更改此參考。因為那個組件不會被重新渲染。
此外，您必須將key道具傳遞給映射按鈕以充分利用反應，而無需重新渲染整個按鈕串列。我只是用你obj.title的修剪字串作為鍵。如果您有任何型別的唯一 ID，則可以在其中使用它。
所以你必須通知反應，陣列已經更新。
import { someData } from "../data/data.js";
const App = () => {
const [showItems, setShowItems] = useState([]);
useEffect(() => {
const arr = [];
someData.map((obj) => {
arr.push(false);
});
setShowItems(arr);
}, []);
const handlePressed = (index) => {
setShowItems((prevState) => {
prevState[index] = true;
return [...prevState];
});
};
return (
<View>
{someData.map((obj, index) => {
return (
<>
<Button
key={obj.title.trim()}
title={obj.title}
onPress={() => {
handlePressed(index);
}}
/>
{showItems[index] && <Text>{obj.item}</Text>}
</>
);
})}
</View>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/525060.html
標籤：反应反应式条件渲染
下一篇：wp更新帖子不更新