React中如何在独立JS文件中访问状态值？跨组件传递API请求URL的实现疑问

嘿，我来帮你搞定这个React实践项目的瓶颈～首先咱们先修正代码里的几个小问题，再解决核心的组件通信问题。

先修正当前代码里的错误 #

1. AuthorInput的onChange写法错误：你现在写的onChange = {setSearchValue(e.target.value)}会直接执行函数，应该改成回调形式：

<input 
  ref={searchField} 
  value={searchValue} 
  onChange={(e) => setSearchValue(e.target.value)} 
  type="text" 
  placeholder="e.g. David Mitchell" 
/>

2. API URL拼接错误：NYT API的key需要用&api-key=拼接，不是直接连在作者名后面，正确的URL应该是：

const userURL = `https://api.nytimes.com/svc/books/v3/reviews.json?author=${urlSearchValue}&api-key=你的API密钥`

核心问题：兄弟组件间的状态共享 #

你现在的AuthorInput和ReviewList是兄弟组件，它们没办法直接互相访问状态或方法。React里解决这种问题最直接的方案是状态提升——把共享的状态和逻辑放到它们的父组件App里，再通过props把数据和方法传递给子组件。

具体实现步骤 #

1. 在App组件中管理共享状态：把搜索关键词、API请求的结果（评论列表）、加载状态、错误状态都放到App里。
2. 给AuthorInput传递回调函数：让AuthorInput在用户提交时，把作者名传给App，由App来处理API请求。
3. 给ReviewList传递评论数据：App把获取到的评论列表、加载状态等传给ReviewList，让它负责渲染。

修改后的代码示例 #

App.js

import ReactDOM from 'react-dom';
import { useState } from 'react';
import AuthorInput from './components/AuthorInput';
import ReviewList from './components/ReviewList';

function App(){
  const [reviews, setReviews] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 处理API请求的函数
  const fetchReviews = async (authorName) => {
    setLoading(true);
    setError(null);
    try {
      const encodedAuthor = encodeURIComponent(authorName.trim());
      const url = `https://api.nytimes.com/svc/books/v3/reviews.json?author=${encodedAuthor}&api-key=你的API密钥`;
      const response = await fetch(url);
      if (!response.ok) throw new Error('请求失败');
      const data = await response.json();
      setReviews(data.results);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <AuthorInput onSubmit={fetchReviews} />
      <ReviewList reviews={reviews} loading={loading} error={error} />
    </>
  )
}

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

AuthorInput.js

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

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

  function handleSubmit(e){
    e.preventDefault();
    const trimmedAuthor = searchValue.trim();
    if (trimmedAuthor) {
      onSubmit(trimmedAuthor); // 把作者名传给父组件的fetchReviews函数
      setSearchValue("");
    }
    searchField.current.focus();
  }

  return(
    <div className="author-search">
      <form onSubmit={handleSubmit}>
        <label>Enter authors name:</label><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.js（示例）

import React from 'react';

function ReviewList({ reviews, loading, error }){
  if (loading) return <p>加载中...</p>;
  if (error) return <p className="error">错误：{error}</p>;
  if (reviews.length === 0) return <p>暂无该作者的评论</p>;

  return (
    <div className="review-list">
      <h2>NYT评论列表</h2>
      <ul>
        {reviews.map(review => (
          <li key={review.book_review_link}>
            <h3>{review.book_title}</h3>
            <p>评论作者：{review.byline}</p>
            <a href={review.book_review_link} target="_blank" rel="noopener noreferrer">查看完整评论</a>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default ReviewList;

其他可选方案 #

如果你的项目后续变得复杂，组件层级更深，状态提升会变得繁琐，这时可以考虑：

• React Context：创建全局的状态上下文，让任意组件都能访问共享状态
• 状态管理库：比如Redux、Zustand等，适合大型应用的状态管理

不过对于你这个学习用的小项目，状态提升是最直观、最容易理解的方案～

内容的提问来源于stack exchange，提问作者Quinesi