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

Question

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

我有这样的搜索组件

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

  function searchHandler() {

    axios.get(`${api.url}SearchMovie/${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 组件

Answer 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.url}SearchMovie/${api.key}/${query}`)
    .then(res => {
      props.setMovie(res.data.results)
    }).catch(err => {
      console.log(err)
    })
  }

  return (...);
}

export default Search;