我是對原生和 redux 做出反應的新手，但遇到了問題。我想將影像鏈接發送到我的商店并重用此鏈接以在我的主組件中顯示本地影像，問題是它不起作用。我的影像沒有顯示在我的模擬器中，我收到此錯誤：
警告：道具型別失敗：提供給“影像”的道具“來源”無效，應為 [數字] 型別之一。
我認為這個問題是由于我沒有弄清楚如何require()在我的家庭組件中使用。
這是我的代碼：
首先我們有我的 MachineList 組件，其中包含我的物件的所有資料，包括它們的影像鏈接，這里影像正確顯示沒有問題：
const machineListData = [
{
id: '1',
name: 'développé couché',
poid: 0,
notes: '',
imageLink: require('../assets/machineListImages/benchPressI.jpg'),
},
{
id: '2',
name: 'presse à jambe',
poid: 0,
notes: '',
imageLink: require('../assets/machineListImages/legPressI.jpg'),
},
{
id: '3',
name: 'machine dos',
poid: 0,
notes: '',
imageLink: require('../assets/machineListImages/backMachineI.png'),
}
]
const MachinesList = (props) => {
let [fontsLoaded] = useFonts({
Circular: require('../assets/fonts/Circular.ttf')
});
function machineAction(props, item) {
props.navigation.navigate('AddMachineDetails', {item})
}
//I deleted some code to make it more easy to read
function machineAction(props, item) {
props.navigation.navigate('AddMachineDetails', {item})
}
return (
<SafeAreaView style={styles.container}>
<FlatList data={machineListData} keyExtractor={(item) => item.id}
renderItem={({item}) => (
<TouchableOpacity style={styles.machineBox} onPress={() => machineAction(props, item)}>
<Image source={item.imageLink} style={styles.imageStyle}/>
<Text style={styles.machineName}>{item.name}</Text>
</TouchableOpacity>
)}
/>
</SafeAreaView>
)}
}
因此，在那之后，我使用反應導航將我的物件（用戶在 flatList 中按下）發送到我的 AddMachineDetailsComponent，（并且這里的影像仍在顯示）。在我的 AddMachineDetailsComponent 中，我將物件分派給 redux ：
const handleAll = () => {
let date = new Date();
let history = {weight: machineWeight, date: date}
const finalObject = {
id: item.id,
name: item.name,
weight: machineWeight,
notes: machineNotes,
history: [history],
imageLink: item.imageLink
}
dispatch(newmachine(finalObject))
props.navigation.navigate("MachinesList")
}
這是我的 initialState 在 redux 中的樣子。通常 initialState 陣列是空的，但我通過在 Google Chrome 的 redux devTool 中復制我的物件來設定一個值來檢查它是否有效。（因此，您在陣列中看到的物件只是我的 AddMachineDetails 發送的內容的副本。）：
const initialState = [
{
id: '0',
name: 'machine dos',
weight: 54,
notes: "Ce sont mes notes",
history: [{weight: 54, date: "2022-02-16T09:11:44.843Z"}],
imageLink: '/static/media/backMachineI.7b31b62c.png'
}
]
const addMachineReducer = ( state = initialState, action) => {
//TODO:
//test mettre itemPosition une fois là peut être ??
let itemPosition = state.findIndex(fPostition)
function fPostition(place) {
//retourne true ou false et findindex si true va donner la position
return place.id === action.position
}
switch(action.type) {
case 'NEWMACHINE':
//pour l'id je génére un nombre aléatoire (c'est pas le truc parfait)
let i = Math.random()* 10000
action.payload.id = i.toString()
return [...state, action.payload];
case 'UPDATEMACHINEWEIGHT':
console.log('début')
// let itemPosition = state.findIndex(fPostition)
console.log('??????' itemPosition)
state[itemPosition] = {...state[itemPosition], weight: action.payload}
return [...state];
case 'UPDATEMACHINEHISTORY':
const weight = action.payload.weight
const date = action.payload.date
state[itemPosition].history = [...state[itemPosition].history, {weight: weight, date: date}]
return [...state]
case 'UPDATEMACHINENOTES':
state[itemPosition] = {...state[itemPosition], notes: action.payload}
return [...state];
default:
return state
}
}
export default addMachineReducer
最后這是我的家庭組件，我得到了錯誤：
const machineList = useSelector(state => state.addMachine)
//I deleted some code to make it more easy to read
return (
<View>
<FlatList data={machineList} keyExtractor={(item) => item.id} renderItem={({item}) => (
<TouchableOpacity style={styles.machineBox} onPress={() => goToDetails(item)} onLongPress={() => deleteItem()}>
<Image source={item.imageLink} style={styles.image}/>
<Text style={styles.machineName}>{item.name}</Text>
<Text style={styles.machineWeight}>{item.weight}</Text>
</TouchableOpacity>
)}></FlatList>
</View>
)
所以在這里我得到了錯誤Warning: Failed prop type: Invalid prop "source" supplied to "Image", expected one of type [number].，我認為這可能與我無法require()在此組件中使用但沒有找到任何解決方案的事實有關。（在 home 組件中，我沒有匯入與影像路徑檔案相關的任何內容）。
uj5u.com熱心網友回復：
不要將影像存盤在狀態中。直接從 machineListData 獲取影像。
const machineListData = [
{
id: '1',
name: 'développé couché',
poid: 0,
notes: '',
imageLink: require('../assets/machineListImages/benchPressI.jpg'),
},
{
id: '2',
name: 'presse à jambe',
poid: 0,
notes: '',
imageLink: require('../assets/machineListImages/legPressI.jpg'),
},
{
id: '3',
name: 'machine dos',
poid: 0,
notes: '',
imageLink: require('../assets/machineListImages/backMachineI.png'),
}
]
const machineList = useSelector(state => state.addMachine)
//I deleted some code to make it more easy to read
return (
<View>
<FlatList data={machineList} keyExtractor={(item) => item.id} renderItem={({item}) => (
<TouchableOpacity style={styles.machineBox} onPress={() => goToDetails(item)} onLongPress={() => deleteItem()}>
<Image source={machineListData.find((data)=>item.id ===data.id).imageLink} style={styles.image}/>
<Text style={styles.machineName}>{item.name}</Text>
<Text style={styles.machineWeight}>{item.weight}</Text>
</TouchableOpacity>
)}></FlatList>
</View>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/428809.html
標籤：javascript 反应 反应式 还原 反应还原