如何将回调函数参数传递给父React组件？

Question

只是想知道将 letterSelected 传递到 useLazyQuery fetchMovies 查询中的最佳方法，这样我就不必使用“A”的静态变量。我希望有一种方法可以将它直接传递到 fetchMovies 中。useLazyQuery 是一个 apollo 查询。

const BrowseMovies = () => {

const [fetchMovies, { data, loading}] = useLazyQuery(BROWSE_MOVIES_BY_LETTER, {

    variables: {

        firstLetter: "A"

    }

})

return (

    <div className="browserWrapper">

        <h2>Browse Movies</h2>

        <AlphabetSelect 

            pushLetterToParent={fetchMovies}

        />

        {

            data && !loading &&

            data.browseMovies.map((movie: any) => {

                return (

                    <div className="browseRow">

                        <a className="movieTitle">

                            {movie.name}

                        </a>

                    </div>

                )

            })

        }

    </div>

)

}

export default BrowseMovies

const AlphabetSelect = ({pushLetterToParent}: any) => {

const letters = ['A','B','C','D','E','F','G','H','I','J','K','L', 'M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#']

const [selectedLetter, setSelectedLetter] = useState("A")

const onLetterSelect = (letter: string) => {

    setSelectedLetter(letter.toUpperCase())

    pushLetterToParent(letter.toUpperCase())

}

return (

    <div className="alphabetSelect">

        {

            letters.map((letter: string) => {

                return(

                    <div 

                        className={selectedLetter === letter ? 'letterSelectActive' : 'letterSelect'} 

                        onClick={() => onLetterSelect(letter)}

                    >

                        {letter}

                    </div>

                )

            })

        }

    </div>

)

}

export default AlphabetSelect

Answer 1

这似乎是通过Lifting State Up解决的问题。useLazyQuery接受 gql 查询和选项并返回一个函数以稍后执行查询。听起来您希望子组件更新variables配置参数。浏览电影移动firstLetter状态BrowseMovies组件从状态更新查询参数/选项/配置添加useEffect状态更新时触发获取将firstLetter状态和setFirstLetter状态更新器传递给子组件const BrowseMovies = () => {  const [firstLetter, setFirstLetter] = useState('');  const [fetchMovies, { data, loading}] = useLazyQuery(    BROWSE_MOVIES_BY_LETTER,    { variables: { firstLetter } } // <-- pass firstLetter state  );  useEffect(() => {    if (firstLetter) {      fetchMovies(); // <-- invoke fetch on state update    }  }, [firstLetter]);  return (    <div className="browserWrapper">      <h2>Browse Movies</h2>      <AlphabetSelect         pushLetterToParent={setFirstLetter} // <-- pass state updater        selectedLetter={firstLetter} // <-- pass state      />      {        data && !loading &&          data.browseMovies.map((movie: any, index: number) => {            return (              <div key={index} className="browseRow">                <a className="movieTitle">                  {movie.name}                </a>              </div>            )          })      }    </div>  )}字母选择将pushLetterToParent回调附加到 的处理div程序onClick const AlphabetSelect = ({ pushLetterToParent, selectedLetter }: any) => {   const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#';   return (     <div className="alphabetSelect">       {         letters.split('').map((letter: string) => {           return(             <div               key={letter}               className={selectedLetter === letter ? 'letterSelectActive' : 'letterSelect'}                onClick={() => pushLetterToParent(letter.toUpperCase())}             >               {letter}             </div>           )         })       }     </div>   ) }