item.map不是函数

Question

我是reactJS的新手。我希望json数据能够根据所单击的选项进行提取和显示。我使用console.log进行了测试，数据被正确提取，但当我尝试使用useState setItems(json(时，它给了我一个错误"Uncaught TypeError:items.map不是函数">

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { useState, useEffect} from 'react';
function App() {
const [option, setOption] = useState('Posts')
const [items, setItems] = useState([])
useEffect(()=> {
fetch(`https://jsonplaceholder.typicode.com/${option}`)
.then(response => response.json())
.then(json => setItems(json))
}, [option])
return (
<div className="App">
<div className='container'>
<div className='menuBar'>
<button onClick={()=> setOption('posts')}>Posts</button>
<button onClick={()=> setOption('users')}>Users</button>
<button onClick={() => setOption('comments')}>Comments</button>
<h2>{option}</h2>
{items.map(item => {
return <pre>{JSON.stringify(item)}</pre>
})}
</div>
</div>
</div>
);
}
export default App;

Answer 1

为了确保代码的故障安全和更容易调试，在使用map之前，您应该检查items是否是一个数组。

import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { useState, useEffect } from "react";
function App() {
const [option, setOption] = useState("posts");
const [items, setItems] = useState([]);
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/${option}`)
.then(response => response.json())
.then(json => setItems(json));
}, [option]);
return (
<div className="App">
<div className="container">
<div className="menuBar">
<button onClick={() => setOption("posts")}>Posts</button>
<button onClick={() => setOption("users")}>Users</button>
<button onClick={() => setOption("comments")}>Comments</button>
<h2>{option}</h2>
{Array.isArray(items) ? items.map(item => <pre>{JSON.stringify(item)}</pre>) : <pre>{JSON.stringify(items)}</pre>}
</div>
</div>
</div>
);
}
export default App;