為什么我在控制台中得到一個空數組和不正確的數據？

Question

我有兩個按鈕， movies和tvshows按鈕。 當我單擊任一選項時，我將option更改為相反的選項，如handleMovieClick和handleTVShowsClick方法中所示。 電影和電視節目可能具有相同的 ID，這就是該option對於獲取很重要的原因。

我正在打印到控制台。

(1) 電影/電視 ID array

(2) 選擇的option

(3) 根據id和option取出每個個體object

當我第一次使用該value計算可用的電影 ID array時，我首先得到一個空數組，然后得到預期的結果。 這是電影 ID 的array ，選項是電影，每個單獨的 promise 對象都已實現。

更重要的是，當我點擊tvshows按鈕時，我得到了以下兩點安慰。

(1) 同一部電影的 id array未更新，選項更改為tv ，但是我得到了一堆帶有“status_message:”The resource you requested could not be found”的承諾，因為我基本上是在嘗試檢索帶有電影 id 的承諾，但是電視節目選項。

然后，

(2) 然后結果改變了，我的一切都如預期的那樣。 那就是選項保持不變，在上面的步驟中發生了變化， array得到更新，並且各個 promise 對象都得到了滿足。

怎么了？

我知道這是因為我在 JSX 中使用array id 的代碼。 我想我只需要在 useEffect 運行並且 so 數組更新后調用array.map()部分，但是如何執行此操作以及為什么 useEffect 不是第一次運行？

這是代碼。

const Results = () => {

    const options = ['movie', 'tv']; 
    const { value } = useParams(); // from router 
    const [ page, setPage ] = useState(1);
    const [ option, setOption ] = useState(options[0]);
    const [ array, setArray ] = useState([]);

    const handleMovieClick = () => {setOption('movie')}
    const handleTVShowClick = () => {setOption('tv')}

    useEffect(() => {
        console.log('HERE');
        fetchArrayByPage(value, page, option).then(res => setArray(res));
    }, [value, page, option])

    console.log(array);
    console.log(option);

    return (
        <div className="results-container">
            <div>
                <ul className='categories'>
                    <button onClick={handleMovieClick}>Movies<span>{0}</span></button>
                    <button onClick={handleTVShowClick}>TV Shows<span>{0}</span></button>
                </ul>
            </div>
            {
            <div>
                <div className='results-list'>
                    {array.map((arr, index) => {
                        console.log(fetchID(arr, option));
                        return <Card key={index} id={arr} option={option}></Card>})}
                </div>

                <div className='pages'>

                </div>
            </div>
            }
        </div>
    );
}

Answer 1

useEffect的回調在渲染后觸發，並且fetchArrayByPage似乎是異步的。 所以點擊“電視節目”會導致：

1. option更改為“電視”（ array保持不變）
2. console.log(array); console.log(option);
3. 使用新option和舊array渲染
4. console.log('HERE'); fetchArrayByPage(...)
5. 一段時間過去了
6. setArray(res)
7. 使用新option和新array渲染

您應該從handle*Click處理程序中調用fetchArrayByPage ：

const handleTVShowClick = () => {
    fetchArrayByPage(value, page, "tv").then(res => {
        setOption('tv');
        setArray(res);
    });
}