无法在 React Native FlatList 中计算 item.id

Question

我正在尝试使用 React Native 的 FlatList 组件呈现练习列表，但我目前无法成功编辑练习名称。一切都在初始渲染时顺利运行。但是，当我尝试编辑练习时，随后重新渲染 returns 错误 undefined is not an object (evaluating 'item.id')。如果我检查我的本地数据库，数据已成功编辑，但将其呈现到屏幕是另一个问题。但是，如果我要关闭错误显示并重新加载应用程序，则练习会发生预期的更改。

我以前 posts/responses 见过这个问题，但据我所知，我已经尝试了建议的解决方案，但无济于事。

这里是负责渲染 FlatList 的组件：

function Exercises({ fetchExercises }) {

const dispatch = useDispatch()
const exercises = useSelector(state => state.exercises) // **passed to data prop**

useEffect(() => {
  dispatch(fetchExercises())
}, [dispatch])

<FlatList 
  data={exercises}
  keyExtractor={item => item.id.toString()}
  renderItem={({ item }) => {
    return <ExerciseListItem item={item} />
  }}
/>

下面是我在 useEffect 中调度的动作：

export const editExercise = (id, changes) => dispatch => {
  dispatch({ type: EXERCISE_START })
  axios.put(<endpoint>, { name: changes })
    .then(res => {
      dispatch({ type: EDIT_EXERCISE_SUCCESS, payload: res.data })
    .catch(err => {
      dispatch({ type: EDIT_EXERCISE_FAIL, payload: err })
    }
}

...这是我的减速器：

const initialState = {
  exercises: [],
}

const exercisesReducer = (state = initialState, action) => {
  switch (action.type) {
    case EDIT_EXERCISE:
      return {
        ...state,
        isLoading: false,
        exercises: state.exercises.map(exercise=> {
          exercise.id === action.payload.id ? action.payload : exercise
        }
      }  
  }
}

无论如何，我能够成功地添加一个新练习到列表中。不确定这是否会有所作为，但值得一提。另外，here 是大约一年前有人问过的一个类似问题，似乎可以解决我的问题，但我仍然没有得到预期的结果。

如有任何帮助，我们将不胜感激！

Answer 1

我认为问题在于您没有在 map 中返回任何导致此错误的内容。

exercises: state.exercises.map(exercise=> {
   return exercise.id === action.payload.id ? action.payload : exercise
}

无法在 React Native FlatList 中计算 item.id

Unable to evaluate item.id in React Native FlatList

react-native

react-native-flatlist