尝试显示 API 响应时无法摆脱此错误“无法读取未定义的属性（读取'每个'）” - ReactJs

Question

我有以下代码： characterActions.js

    export const getCharacters = () => async(dispatch) => {
      try {
        dispatch({ type: FETCH_CHARACTERS_REQUEST })
    
        const { data } = await axios.get('https://rickandmortyapi.com/api/character')
        dispatch({
          type: FETCH_CHARACTERS_SUCCESS,
          payload: data
        })
      } catch (error) {
        dispatch({
          type: FETCH_CHARACTERS_FAIL,
          payload: 'error'
        })
      }
    }

characterReducers.js

    import {
      FETCH_CHARACTERS_REQUEST,
      FETCH_CHARACTERS_SUCCESS,
      FETCH_CHARACTERS_FAIL,
    } from '../actions/characters/characterConstants'
    
    export const characterListReducer = (state = { characters: {} }, action) => {
      switch(action.type) {
        case FETCH_CHARACTERS_REQUEST:
          return { loading: true, characters: [] }
        case FETCH_CHARACTERS_SUCCESS:
          return { loading: false, characters: action.payload }
        case FETCH_CHARACTERS_FAIL:
          return { loading: false, error: action.payload }
        default:
          return state;
      }
    } 

和 HomeScreen.js 我想在其中显示提取的字符

    const HomeScreen = () => {
      const dispatch = useDispatch()
      const charactersList = useSelector(state => state.charactersList)
      const { loading, error, characters } = charactersList
    
      console.log(characters.results)
      
      useEffect(() => {
        dispatch(getCharacters())
      }, [dispatch])
    
      return (
        <div>
         {characters.results.map((character) => {
           <h1 key={character.id}>{character.name}</h1>
         })}
        </div>
      )
    }

当进入浏览器时，我不断收到 ** TypeError：无法读取未定义的属性（读取“地图”）**

我正在尝试从 Rick and Morty API 获取数据。

谢谢你们！

Answer 1

表示characters.results不是数组。

console.log(characters.results) 时显示什么？

Answer 2

可能有错误characters 应该是一个空数组。为安全起见，您可以使用||[] 或直接返回一个空白数组。

export const characterListReducer = (state = { characters: {} }, action) => {
      switch(action.type) {
        case FETCH_CHARACTERS_REQUEST:
          return { loading: true, characters: [] }
        case FETCH_CHARACTERS_SUCCESS:
          return { loading: false, characters: action.payload || [] } // here, in case null data.
        case FETCH_CHARACTERS_FAIL:
          return { loading: false, error: action.payload, characters:[] }  // here, on error
        default:
          return state;
      }
    } 

循环前添加检查以防出错

const HomeScreen = () => {
  const dispatch = useDispatch();
  const charactersList = useSelector((state) => state.charactersList);
  const { loading, error, characters } = charactersList;

  useEffect(() => {
    dispatch(getCharacters());
  }, [dispatch]);

  return (
    <div>
      {loading ? (
        <p>Loading please wait...</p>
      ) : error ? (
        <strong>There is error while fetching data, {error}</strong>
      ) : (
        characters.results.map((character) => {
          <h1 key={character.id}>{character.name}</h1>;
        })
      )}
    </div>
  );
};

/// 更新代码：

const { data } = await axios.get('https://rickandmortyapi.com/api/character')
dispatch({
  type: FETCH_CHARACTERS_SUCCESS,
  payload: data.results // use results instead to make it consistent with above assign
})

/// 主屏幕

// remove results now
characters.map((character) => {
  <h1 key={character.id}>{character.name}</h1>;
})