Блог

Я реализую простой MyPage. При первом отображении файла Mypage.tsx Redux сохраняет информацию о пользователе как результат использования. Однако, когда я пытаюсь получить данные с помощью UseSelector справа ниже, он говорит, что значение не может быть найдено.

Возможно, это связано с тем, что данные обрабатываются сразу же при получении значения. Есть ли способ решить эту проблему?

Ошибка : Ошибка типа: Не удается прочитать свойство «myPostList» с нулевым значением

Часть ошибки : const MyPost = userData.myPostList.map( …..

 import { GetUserInfo } from "../modules/action-creator";
import { RootState } from "../modules/Store";
import "../styles/mypage.scss";



function Mypage() {
  const dispatch = useDispatch();

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

  const userData = useSelector((state : RootState) => state.User.userData)
  

  const MyPost = userData.myPostList.map(
    (item:any, index:number) => {
      return(
        <tbody id = {"body"   index} key = {item.id}>
          <tr>
            <td id = "title">{item.postName}</td>
          </tr>
          <tr>
            <td id = "content">{item.content}</td>
          </tr>
        </tbody>
      )
    }
  )
    
  return (
        <div className="mypost">
          <div className="post_info">
            전체글 0개
            <button>글쓰기</button>
          </div>
          <table className="post_detail">{MyPost == null ? "표시할 정보가 없습니다." : MyPost}</table>
        </div>
  )
}
 

Как объясняется ниже, похоже, что данные были обработаны до получения всех значений. Есть ли способ решить эту проблему?

Вы userData должны убедиться, что он имеет ценность, прежде чем использовать его. Вы должны использовать optional chaining в этом случае

 const MyPost = userData?.myPostList?.map(...)
 

Если приведенный выше ответ вам не помог, может быть полезно отладить, как вы храните эти значения в редукторе. Я также предлагаю отладить действия (на saga/thunk).

Это может произойти из-за неправильного выбора имени реквизита или даже неправильного запроса, если вы используете промежуточные программы.