ReactJs useState .map() 不是函数

Question

我试图了解useState和useEffect钩子在 ReactJs 中是如何工作的。我收到错误消息.map() 不是函数尝试在表格中显示数据时。const [posts, setPosts] = useState([]);useEffect(() => {    const alarmService = new AlarmService();    const response = alarmService.getData();    setPosts(response)}, [])return (    <table className="table">        <tbody>        {posts.map(data => (            <tr key={data.id}>                <td>                    <div className="row">                        {data.name}                    </div>                </td>                <td className="custom" >                    <button                        className="btn btn-danger btn-sm"                        onClick={() => this.handleDelete(data)}                    >                        Delete                    </button>                </td>            </tr>        ))}        </tbody>    </table>);我认为问题出在我的useEffect，因为我不确定如何处理响应。解决了我查看了这些示例：https : //www.robinwieruch.de/react-hooks-fetch-data/诀窍是在 useEffect 中创建一个异步函数。像这样：useEffect(() => {    async function test() {       const alarmService = new AlarmService();       const response = await alarmService.getData();       console.log(response);       setPosts(response)    }    test();}, []);感谢所有花时间回复和帮助的人！

Answer 1

我认为这里的问题alarmService.getData是异步的，你没有正确处理它。这就是为什么您会收到 Promise 未决，并且您无法映射帖子的原因。

useEffect(() => {

    const alarmService = new AlarmService();

    alarmService.getData().then(response => response.json()).then(data =>setPosts(data))    

}, []) 

这应该可以解决您的问题。