如何使用 React Hooks 在另一个组件中获取表单的输入值

Question

我已将 Axios 与 Reach Hooks 一起使用。有什么方法可以从 form.js 文件中获取更新的输入值，以便我可以使用它来更新 ApiData.js 文件中的 axios.get 链接？当用户键入一个值时，我想获取该值并在 ApiData.js 文件中使用，以便可以在 axios.get 中更新该值。我尝试了很多方法来做到这一点，将 form.js 文件中的 updatedInputVal 传递给一个函数，然后尝试在 ApiData.js 文件中访问它。没有任何效果。我是初学者。因此，如果您不清楚这个问题，请告诉我。提前致谢

这是 form.js 文件

import React, {useState} from 'react';

function UseForm(){
    const[inputValue, setInputValue] = useState({
        search: "",
        contactName:"",
        contact:""
    })

    function handleChange(e){
        const {name, value} = e.target;
        setInputValue(previousValue=>{
            if(name === "search"){
                return{
                    search: value,
                    contactName:previousValue.contactName,
                    contact:previousValue.contact   
                }
            }
        })
    }

    function onFormSubmit(event){
        let updatedInputVal = setInputValue(inputValue.search)
        event.preventDefault();
        return updatedInputVal;//Want to fetch this value and use it in the ApiData.js component
    }



    return ( 
        <div className="form-container">
            <div className="input-div">
                <form onSubmit={onFormSubmit}>
                    <input className="form-input" onChange={handleChange} type="text" name="search" value={inputValue.search} placeholder="Search TV Shows"/>
                </form>
            </div>
            <div className="btn-div">
                <button type="submit" className="btn">Submit</button>    
            </div>
        </div>)
}



export default UseForm;

这是 ApiData.js 文件

import React, {useState, useEffect} from 'react';
import axios from 'axios';
    

const FetchApiData = () =>{
    const [data, setData] = useState([])
    useEffect(()=>{
        async function fetchData(){
        const resquest =  await axios.get(`http://api.tvmaze.com/search/shows?q=${//want to insert here the updated input value the user types}`)
        const appData =  resquest.data[0].show.image.medium;
        setData(appData)
        return appData
    }  fetchData()
    }, [])
    
    return (
            <div className="section-image">
                <img src={data} alt=""/>
            </div>
            ) 
}

export default FetchApiData

App.js 文件

import React from 'react';
import Nav from "./Nav";
import UseForm from "./Form"
import FetchApiData from './ApiData'


function App(){
    return (
    <div>
        <Nav 
        src={`${process.env.PUBLIC_URL}/images/logo.png`}
        title = "CONTACT US"
        />
        <UseForm/>
        <FetchApiData/>
    </div>)
}

export default App

Answer 1

您需要将inputValue 状态提升为App 组件并通过props 传递它：

function App(){
    const [inputValue, setInputValue] = useState({
        search: "",
        contactName:"",
        contact:""
    })
    return (
    <div>
        <Nav 
        src={`${process.env.PUBLIC_URL}/images/logo.png`}
        title = "CONTACT US"
        />
        <UseForm inputValue={inputValue} setInputValue={setInputValue}/>
        <FetchApiData inputValue={inputValue}/>
    </div>)
}

function UseForm({inputValue, setInputValue}){
 // ...
}

此外，像Redux 这样的状态管理解决方案还可以帮助管理与组件分开的状态，这样您就不需要像上面显示的那样通过道具传递状态。

Answer 2

因为App 组件是FetchApiData 和UseForm 的父组件，您可以简单地使用App 组件处理此值的状态并将此属性传递给两个子组件。

App组件：

function App(){

    // declare state object here
    const [inputValue, setInputValue] = useState({
        search: "",
        contactName:"",
        contact:""
    });

    return (
    <div>
        <Nav 
        src={`${process.env.PUBLIC_URL}/images/logo.png`}
        title = "CONTACT US"
        />
        {/* Pass props to each component */}
        <UseForm inputValue={inputValue} setInputValue={setInputValue}/>
        <FetchApiData inputValue={inputValue}/>
    </div>)
}

UseForm组件：

function UseForm({inputValue, setInputValue}){
    // Remove this
    // const[inputValue, setInputValue] = useState({
    //     search: "",
    //     contactName:"",
    //     contact:""
    // })

    // keep everything else the same
}

FetchApiData组件：

const FetchApiData = ({inputValue}) =>{
    const [data, setData] = useState([])
    useEffect(()=>{
        async function fetchData(){
        const resquest =  await axios.get(`http://api.tvmaze.com/search/shows?q=${inputValue}`)
        const appData =  resquest.data[0].show.image.medium;
        setData(appData)
        return appData
    }  fetchData()
    }, [inputValue])
    
    return (
            <div className="section-image">
                <img src={data} alt=""/>
            </div>
            ) 
}

FetchApiData 将在每次 inputValue 更改时重新渲染。请注意这一点，除非它是预期的行为。