在 React 组件中显示来自 API 的响应

Question

我正在尝试将 API 的响应显示到我的 React 组件中，但它不起作用。如果我尝试在控制台中使用它，我可以看到数据及其值，但在反应组件中看不到，当我尝试在 div.

中显示值时它是空的

这是我试图在我的 React 组件中显示它的代码：

const CharacterListing = () => {
const characters = useSelector(getAllCharacters);
console.log("Hello", characters);


const renderCharacters = Object.entries(characters).map(([key, value]) => {
    console.log(value.name);
    <div>{value.name}</div>
})

return (
    <div>
        {renderCharacters}
    </div>
);
};

export default CharacterListing;

这是我的字符切片组件的代码

const initialState = {
characters: {},
};

const characterSlice = createSlice({
name: 'characters',
initialState,
reducers: {
    addCharacters: (state, { payload }) => {
        state.characters = payload;
      },
},
});

export const { addCharacters } = characterSlice.actions;
export const getAllCharacters = (state) => state.characters.characters;
export default characterSlice.reducer;

这是我的主页组件的代码：

const Home = () => {
const dispatch = useDispatch();

useEffect(() => {

    const fetchCharacters = async () => {
        const response = await baseURL.get(`/characters`)
            .catch(error => {
                console.log("Error", error);
            });
        dispatch(addCharacters(response.data));
        console.log("Success", response);
    };
    fetchCharacters();
}, [])
return (
    <div>
        Home
        <CharacterListing />
    </div>
);
};

export default Home;

谢谢

Answer 1

您忘记将 return 项目添加到您的地图函数中

试试这个：

const renderCharacters = Object.entries(characters).map(([key, value]) => {
    console.log(value.name);
    return <div key={key}>{value.name}</div>
})

在 React 组件中显示来自 API 的响应

Displaying response from API in react component

javascript

reactjs

redux

redux-toolkit