出于某種原因，當我呼叫 API 時，我的卡不會重新呈現。當后端的資訊更新時，除非我重繪 應用程式，否則它不會顯示在前面。
我將資訊作為道具傳遞并獲取公司名稱、地址和電話。
const CpoCard = ({ info, navigation }) => {
const [companyName, setCompanyName] = useState(info.companies[0].companyName);
const [address, setAddress] = useState(info.companies[0].city);
const [phoneNumber, setPhoneNumber] = useState(info.companies[0].phoneNumber);
const [employeeID, setEmployeeID] = useState(info.userId.employeeId);
const { setSelectedEmployee } = useCompany();
const handleEditPress = () => {
setSelectedEmployee(info);
navigation.navigate('DeleteEmployee');
//deleteEmployee
};
const handlePress = () => {
console.log(info);
navigation.navigate('CpoInfo', { info: info });
};
return (
<View style={styles.outerContainer}>
{
<View style={styles.innerContainer}>
<View style={styles.mainContent}>
<Image
style={styles.employeeImg}
source={require('~assets/pngs/avatar.png')}
/>
<View style={styles.companyInfoContainer}>
<TouchableOpacity onPress={handlePress}>
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
{companyName !== null ? `${companyName} ` : 'info'}
</Text>
<Text>{`Phone Number: ${phoneNumber}`}</Text>
<Text>{`address: ${address}`}</Text>
</TouchableOpacity>
</View>
</View>
</View>
}
</View>
);
};
uj5u.com熱心網友回復：
info每當父組件更新道具時，CpoCard都會重新渲染。console.log('rerendered)您可以通過包含在組件中來簡單地測驗它。
根據您在問題中的措辭，問題似乎在于重新渲染，但更有可能是您的CpoCard組件結構。
在 React中，每當組件首次加載時，它都會根據您在 中設定的任何初始值創建其狀態useState。稍后，除非呼叫 setter 函式，否則狀態不會發生變化或充電。這會觸發組件重新渲染。否則您不能設定狀態值。
在您的情況下，在CpoCard組件中，道具info僅用于通過設定初始狀態值useState(info.companies[0].companyName)。因此，該值是在組件的第一次加載時設定的。但后來，無論infoprop 是如何變化的——無論組件重新渲染多少次，狀態都不會改變。
簡單示例：
在CpoCard加載時<CpoCard info={'initial value'} />-> 組件CpoCard通過創建狀態useState并將其值存盤為傳遞const [info, setinfo] = useState(props.info)-> 組件渲染。
稍后下線infoprop 更改<CpoCard info={'second value'} />-> 組件CpoCard重新渲染仍然保持初始值info，因為您不能像這樣更改狀態值。無論重新渲染多少次，初始值都將一直保留，除非呼叫 setter和更改。const [info, setinfo] = useState(props.info)'initial value'setInfo
因此，在您的情況下，您的結構就是問題所在。
我不確定為什么你甚至將每個單獨的道具存盤到自己的狀態 - 這似乎是一個結構本身的缺陷。如果你得到傳遞的值 - 使用那些。如果由于某種原因您實際上需要為每個值使用狀態，那么還有一種解決方法 -useEffect
useEffecthook 允許你監聽變化并基于它做出反應。因此，您應該呼叫每個 setteruseEffect來監聽您的infoprop 更改：
useEffect(() => {
setCompanyName(info.companies[0].companyName)
setAddress(info.companies[0].city)
setPhoneNumber(info.companies[0].phoneNumber)
setEmployeeID(info.userId.employeeId)
}, [info])
隨之useEffect發生的是組件加載初始值，將其存盤在狀態中并呈現。每當prop.info組件重新呈現更改時，useEffect依賴陣列（[]最后的）檢查prop.info更改，因此它執行useEffect基于新info屬性設定狀態并導致組件重新呈現的函式（鉤子內的代碼）再次顯示新資料。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469248.html