Question

我有一个与API有关的问题，并做出了反应。我想将API提取分派到ContextAPI组件。有没有可能放置所有useState挂钩的方法：

    const [tab, setTab] = useState([]); 
    const [search, setSearch] = useState(''); 
    const [query, setQuery] = useState(''); 
    const [select, setSelect] = useState([]);

到单个ContextAPI组件？主要目标是重构代码并将其放入小型组件中。例如表单组件，输入组件，选择组件

const App = () => {
    const [tab, setTab] = useState([]); 
    const [search, setSearch] = useState(''); 
    const [query, setQuery] = useState(''); 
    const [select, setSelect] = useState([]); 


    useEffect(() => {
        getTabulatura();
    }, [query]);


    const getTabulatura = async () => {
        const response = await fetch(`http://www.songsterr.com/a/ra/songs.json?pattern=${query}`);
        const data = await response.json();
        setTab(newData);
    }

    const updateSearch = e => {
        setSearch(e.target.value);
    }

    const getSearch = e => {
        e.preventDefault();
        setQuery(search);
    }

    const tabChange = e => {
        const filteredData = tab.filter(tabItem => tabItem.tabTypes.some(type => type === e.target.value))
        setSelect(filteredData)
    }



    return (
        <div className="App">
            <div className="container">
                <h1 className="header-title">Find the music type of tablature !</h1>
                <form onSubmit={getSearch} className="search-form" >
                    <input className="search-bar" placeholder="Write artist/song" value={search} onChange={updateSearch} />
                    <select className="select-tab" onChange={tabChange} >
                        <option value="none" > --Choose tab-- </option>
                        <option value="chords" > chords </option>
                        <option value="bass" > bass </option>
                        <option value="guitar" > guitar </option>
                        <option value="player" > player </option> </select>
                    <button className="search-button" type='submit' >Search </button>
                </form>
                <div className="tabulatury" > {
                    select.map(tabType => (<Tabulatura
                        title={tabType.title}
                        artist={tabType.artist.name}
                        tabulatura={tabType.tabTypes}
                        key={tabType.id}
                    />
                    ))};
                </div>
            </div>
        </div>
    );
}

export default App

Answer 1

我认为您正在寻找Formik表单库？尝试fromik，这是React JS和React Native的非常流行的表单库。您可以在Formik的帮助下构建自定义表单组件。

https://formik.org/docs/overview

以下是文档中的几行内容 Formik是一个小型图书馆，可以帮助您解决3个最烦人的部分： 1，获取值进入和脱离表单状态 2.验证和错误消息 3.处理表单提交

通过将以上所有内容集中在一起，Formik可以使事情井井有条，轻松进行测试，重构和推理

具有更多钩子的上下文API

1 个答案: