繁体   English   中英

React Hooks - 作为prop传递的函数组件内的函数无法访问状态

[英]React Hooks - function inside function component passed as prop can't access state

我已阅读有关React钩子的信息,并希望在我开发的这个新网站上试用它。 我试图传递异步函数作为道具。 该函数的一部分是设置我的“城市”状态和控制台日志,以查看API是否有效。 我一直在接收“setCities不是函数”错误,或者如果我只是直接控制台登录,则返回undefined。 我认为该函数无法访问{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>
    );
}

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

所以你可以改变

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

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

它应该工作。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM