将状态共享给其他组件 |将数据传递给其他组件

Posted 2023-02-23

【中文标题】将状态共享给其他组件 |将数据传递给其他组件

【英文标题】：Share State to other component | pass data to other component

【发布时间】：2021-08-15 11:33:58

【问题描述】：

你好，我目前正在学习 React，我对如何将数据或状态传递给另一个组件感到困惑

我有这样的搜索组件

function Search(props) 
  const [ query, setQuery ] = useState("")
  const [ movie, setMovie ] = useState()

  function searchHandler() 

    axios.get(`$api.urlSearchMovie/$api.key/$query`)
    .then(res => 
      setMovie(res.data.results)
    ).catch(err => 
      console.log(err)
    )

  

  return (
    <div className="search-input">
        <div class="input-group input-custom mb-3">
          <input
            type="text"
            class="form-control"
            placeholder="Search Movie"
            onChange=e => setQuery(e.target.value)
            value=query
          />
          <button
            class="btn btn-outline-primary"
            onClick=searchHandler
          >
            Search
          </button>
        </div>
    </div>
  );


export default Search;

还有这样的 MainPage 组件

function MainPage() 

  return (
    <div>
      <Navbar />
      <div className="container">
        <Search />
        <hr />
        <div className="content">
          <div className="row">
            <div className="col-4">
              <Card
                image="https://dbkpop.com/wp-content/uploads/2020/06/weeekly_we_are_teaser_2_monday.jpg"
                title="Monday"
                description="Monday Weeekly Member"
              />
            </div>
            <div className="col-4">
              <Card
                image="https://dbkpop.com/wp-content/uploads/2020/06/weeekly_we_are_teaser_2_monday.jpg"
                title="Monday"
                description="Monday Weeekly Member"
              />
            </div>
            <div className="col-4">
              <Card
                image="https://dbkpop.com/wp-content/uploads/2020/06/weeekly_we_are_teaser_2_monday.jpg"
                title="Monday"
                description="Monday Weeekly Member"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );


export default MainPage;

问题是，如何将状态（电影）从搜索组件传递到主页面组件。这样我就可以将数据呈现给 MainPage 组件

【参考方案1】：

Data in React flows down，所以你需要lift the state up。

因此，movie 状态应该在MainPage 的范围内：

function MainPage() 
  const [ movie, setMovie ] = useState()
  
  // Set query results with setMovie
  return <Search setMovie=setMovie ... />


function Search(props) 

  function searchHandler() 
    axios.get(`$api.urlSearchMovie/$api.key/$query`)
    .then(res => 
      props.setMovie(res.data.results)
    ).catch(err => 
      console.log(err)
    )
  

  return (...);


export default Search;

【讨论】：

哇，谢谢你的回答。我认为组件之间共享状态只能使用Context