如何使用redux调度和重用图像

Question

我刚开始对原生和redux进行反应，遇到了一个问题。我想向我的商店发送一个图像链接，并重用这个链接来在我的主页组件中显示本地图像，问题是它不起作用。我的图像没有显示在我的模拟器中，我得到这个错误：

警告：失败道具类型：无效道具"源"；提供给"；图像"；，应为[number]类型。

我认为这个问题是由于我没有弄清楚如何在我的主组件中使用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>
)}
}

因此，在那之后，我使用react导航将我的对象(用户在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()有关，但没有找到任何解决方案。(在主组件中，我没有导入任何与图像路径文件相关的内容(。

Answer 1

不要将图像存储在状态中。直接从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>
)