ReactJs useState .map() 不是函数答案

【问题标题】：ReactJs useState .map() is not a functionReactJs useState .map() 不是函数
【发布时间】：2019-09-18 13:38:14
【问题描述】：

我试图了解 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();
}, []);

感谢所有花时间回复和帮助的人！

【问题讨论】：

你好，请问const response = alarmService.getData()中的“response”是不是数组？
刚刚注意到响应是：Promise {}。在这个承诺中是数组。我假设 .map() 函数需要一个数组，对吗？
我相信您的问题与反应无关，而是与承诺有关。我假设 getData() 是一个 ajax 调用。这意味着当您执行 setPosts(response) 时，响应是承诺或未定义，因此 map 将不起作用。要绕过这一点，您需要在解决 getData 承诺后执行 setPosts。
@JensOlsson 你明白了。只需兑现承诺，您就可以开始了。干杯
试试const response = alarmService.getData().then(res => res.json());

标签： javascript reactjs jsx

【解决方案1】：

我认为这里的问题是alarmService.getData 是异步的，您没有正确处理它。这就是您获得 Promise 待处理且无法映射帖子的原因。

useEffect(() => {
    const alarmService = new AlarmService();
    alarmService.getData().then(response => response.json()).then(data =>setPosts(data))    

}, [])

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

【讨论】：

有道理！我会调查的。感谢您的提醒。
我会像其中一个很酷的孩子一样使用 async/await。但是，是的，认为这只是异步数据处理不当的想法绝对是正确的。
@JensOlsson 它解决了你的问题吗？
@Noob 我使用了另一种在我的项目中运行良好的解决方案。不过谢谢！

【解决方案2】：

是的，你是对的。问题在于我们更新状态的方式，即在 useEffect 方法中。当我们更新状态时，setPosts 不会识别帖子是否是一个数组并将状态更新为简单对象。因此，您会看到错误。

当我尝试在帖子中添加响应时，您可以在代码框中找到类似的场景 https://codesandbox.io/s/ecstatic-flower-lq2r1.

请取消注释代码和框中的修复以查看工作正常。

【讨论】：