React Redux工具包

Question

我有Postsslice，可从服务器提供有关帖子的数据 在此处输入图像描述

PostSlice Code

const initialState = {
  posts: [],
};

const post = createSlice({
  name: "post",
  initialState,
  reducers: {
    getPosts(state, action) {
      state.posts = action.payload.posts;
    },
  },
});

const { getPosts } = post.actions;

export function GetPostByInterests() {
  return async (dispatch) => {
    try {
      const response = await API.get("/posts", {
        params: {
          limit: 10,
          offset: 0,
        },
      });
      const data = response.data;
      const posts = data.data;

      dispatch(
        getPosts({
          posts: posts,
        })
      );
    } catch (e) {}
  };
}

我正在尝试在前端拉出用户的图像在明信片中，我会收到一个错误：undurect typeError：posts.author.avatar是未定义的

前端代码

export const News = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.post.posts);
 
  useLayoutEffect(() => {
    dispatch(GetPostByInterests());
  }, []);

  return (
    <div className="container-md shadow-lg bg-white py-10 px-8 mx-[5rem] my-[1rem] rounded-md">
      {posts.map((posts) => (
        <PostCard key={posts.id} posts={posts} />
      ))}
    </div>
  );
};

明信片前端图像显示：

        <img
          className="w-12 h-12 rounded-full object-cover mr-4 shadow"
          src={posts.author.avatar.url}
          alt="avatar"
        ></img>

Answer 1

welcom to stackoverflow @memphis

您需要使用在 src 的 img 标签中。像这样：

<img
  className="w-12 h-12 rounded-full object-cover mr-4 shadow"
  src={posts?.author.avatar.url}
  alt="avatar"
></img>

最好使用映射来自API的数据时，以避免获取数据时遇到未定义的错误：

// If posts aren't loaded yet, show a message
// (Or you can even show a loading spinner)
{!posts?.length ? <p>Nothing to Show</p> : posts.map((posts) => (
  <PostCard key={posts.id} posts={posts} />
))}