Redux工具包

Question

我有PostsSlice，它提供来自服务器的关于posts 在这里输入图像描述的数据

PostSlice代码：

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) {}
  };
}

我试图在明信片的前端提取用户的图像，我得到了一个错误: Uncaught : posts.author.avatar是未定义的

FrontEnd码

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>
  );
};

PostCard FrontEnd图像显示：

        <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 @孟菲斯

您需要在可选链标记的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} />
))}