如何使用 React 访问单独的 .js 文件中的状态值？

Question

我正在尝试创建一个简单的网络应用程序，用户可以在其中输入作者姓名，这会向 NYT 书评 API 发送请求，然后 return 列出所有纽约时报对该作者的评论。我将此作为学习经验来掌握 React，但我完全被难住了。我的代码如下：

app.js

import ReactDOM from 'react-dom'
import AuthorInput from './components/AuthorInput'
import ReviewList from './components/ReviewList'

function App(){
    return (
        <>
            <AuthorInput />
            <ReviewList />
        </>
    )
}

ReactDOM.render(<App />, document.getElementById('app'))

AuthorInput.js

import React,{useState, useRef} from 'react'
import '../styles/main.scss'

function AuthorInput(){
    
    const [searchValue, setSearchValue] = useState("");
    const searchField = useRef(null);

    function getURL(){
        const urlSearchValue = encodeURIComponent(searchValue.trim()); 
        const userURL = `https://api.nytimes.com/svc/books/v3/reviews.json?author=${urlSearchValue}MY_API_KEY`

        return userURL  
    } 

    function handleSubmit(e){
        e.preventDefault()
        searchField.current.focus()
        getURL() 
        setSearchValue("")
    } 
    
    return(
        <>
            <div className = "author-search">
                <form onSubmit={handleSubmit} action = "">
                    <label>Enter authors name:</label><br></br>
                    <input 
                    ref={searchField}  
                    value={searchValue}
                    onChange = {setSearchValue(e.target.value)}  
                    type = "text"
                    placeholder = "e.g. David Mitchell"
                    />
                    <button>Submit</button>

                </form>

            </div>
        </>
    )
} 

export default AuthorInput

我想在用户输入作者姓名时使用 returned URL 值（来自 AuthorInput.js 中的 getURL() 函数）用于单独文件 (ReviewList.js) 以获取数据并创建列表。 API 似乎需要用户输入（即作者姓名）才能获取数据。有什么方法可以让我访问这个 URL 值，或者我目前正在做的事情使它变得不可能？

Answer 1

您可以传递一个更新父级数据的函数。查看下面的示例：

App Component

function App(){
    const [userUrl, setUserUrl] = useState("");
    
    return (
        <>
            <AuthorInput onUrlChange={latestUserUrl => setUserUrl(latestUserUrl)} />
            <ReviewList userUrl={userUrl} />
        </>
    )
}

AuthorInput component

function AuthorInput({onUrlChange}){
    const [searchValue, setSearchValue] = useState("");
    const searchField = useRef(null);
    
    const updateUrlValue = (author) => {
        const urlSearchValue = encodeURIComponent(author.trim());
        const userURL = `https://api.nytimes.com/svc/books/v3/reviews.json?author=${urlSearchValue}MY_API_KEY`

        setSearchValue(author);
        onUrlChange(userURL); // function is provided by the parent component(App)
    }

    function handleSubmit(e){
        e.preventDefault()
        searchField.current.focus()
        getURL()
        updateUrlValue("")
    }

    return(
        <>
            <div className = "author-search">
                <form onSubmit={handleSubmit} action = "">
                    <label>Enter authors name:</label><br></br>
                    <input
                        ref={searchField}
                        value={searchValue}
                        onChange = {e => updateUrlValue(e.target.value)}
                        type = "text"
                        placeholder = "e.g. David Mitchell"
                    />
                    <button>Submit</button>

                </form>

            </div>
        </>
    )
}

export default AuthorInput

Answer 2

您可以通过以下方式重构您的代码

您可以创建特定用途的组件，即。 AuthorInput 将完成从用户那里获取输入的工作。 ReviewList 将显示从 API.

中获取的所有数据列表

App.js

import ReactDOM from 'react-dom'
import AuthorInput from './components/AuthorInput'
import ReviewList from './components/ReviewList'

function App(){
    const [booksList,setBooksList] = useState([]);

    const fetchBooksList = (url) => {
       fetch(url)
         .then(response => response.json())
         .then(data => setBooksList(data))
    }
    
    return (
        <>
            <AuthorInput fetchBooksList={fetchBooksList}/>
            <ReviewList booksList={booksList}/>
        </>
    )
}

ReactDOM.render(<App />, document.getElementById('app'))

AuthorInputComponent


import React,{useState, useRef} from 'react'
import '../styles/main.scss'

function AuthorInput({fetchBooksList }){
    
    const [searchValue, setSearchValue] = useState("");
    const searchField = useRef(null);

    function getURL(){
        const urlSearchValue = encodeURIComponent(searchValue.trim()); 
        const userURL = `https://api.nytimes.com/svc/books/v3/reviews.json?author=${urlSearchValue}MY_API_KEY`
        return userURL  
    } 

    function handleSubmit(e){
        e.preventDefault();
        searchField.current.focus();
        fetchBooksList(getURL());
        setSearchValue("");
    } 
    
    return(
        <>
            <div className = "author-search">
                <form onSubmit={handleSubmit} action = "">
                    <label>Enter authors name:</label><br></br>
                    <input 
                    ref={searchField}  
                    value={searchValue}
                    onChange ={(e) => setSearchValue(e.target.value)}  
                    type = "text"
                    placeholder = "e.g. David Mitchell"
                    />
                    <button>Submit</button>
                </form>
            </div>
        </>
    )
}

export default AuthorInput

而对于 ReviewList 组件，您可以简单地显示通过 prop

传递的获取数据

如何使用 React 访问单独的 .js 文件中的状态值？

How to access state values in sepearate .js files using React?

javascript

api

scope

reactjs

react-hooks