React Hooks - 作为道具传递的函数组件内部的函数无法访问状态答案

【问题标题】：React Hooks - function inside function component passed as prop can't access stateReact Hooks - 作为道具传递的函数组件内部的函数无法访问状态
【发布时间】：2019-06-18 13:48:43
【问题描述】：

我已经阅读了有关 React 钩子的信息，并想在我正在开发的这个新网站上尝试一下。我正在尝试将异步函数作为道具传递。部分功能是设置我的“城市”状态和控制台日志，以查看 API 是否有效。我一直收到“setCities 不是函数”错误，或者，如果我直接在控制台记录它，城市会返回未定义。我认为该功能无法访问{cities, setCities} 状态。我已经在类组件中尝试过它并且它有效。有没有人遇到过类似的情况？下面是代码示例：

import React, { useState } from "react";
import axios from "axios";
import Menu from "./Menu";

function App() {
    const { cities, setCities } = useState([]);

    const searchSubmit = async term => {
        try {
            const res = await axios.get("http://localhost:8080/general/search", {
                params: { city: term }
            });
            setCities(res.data);
            console.log(cities);
        } catch (err) {
            console.log(err.message);
        }
    };

    return (
        <div className="ui container">
            <Menu handleSearchSubmit={searchSubmit} />
        </div>
    );
}

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

useStates 返回一个数组，而不是一个对象...

所以你可以改变

const { cities, setCities } = useState([]);

到

const [ cities, setCities ] = useState([]);

它应该可以工作。

【讨论】：

哇。我怎么错过了？谢谢！
我很高兴，那么您可以选择这个答案作为正确答案；）
奇怪的是，我在类似的情况下遇到了同样的问题，与 OP 有同样的怀疑，并且与您的答案完全相同。我想知道为什么默认的 lint 规则没有警告这样的..