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(() => {&nbsp; &nbsp; const alarmService = new AlarmService();&nbsp; &nbsp; alarmService.getData().then(response => response.json()).then(data =>setPosts(data))&nbsp; &nbsp;&nbsp;}, [])&nbsp;这应该可以解决您的问题。