为什么我在控制台中得到一个空数组和不正确的数据？

Question

我有两个按钮，movies 和 tvshows 按钮。当我点击其中任何一个时，我将 option 更改为相反的，如 handleMovieClick 和 handleTVShowsClick 方法所示。电影和电视节目可能具有相同的 ID，这就是 option 对于抓取很重要的原因。

我正在打印到控制台。

(1) array 个 movie/tv 个 ID

(2) option 选中

(3) 根据 id 和 option

获取每个单独的对象

当我第一次使用 value 计算可用电影 ID 的 array 时，我首先得到一个空数组，然后得到预期结果。那就是电影id的array，选项是电影，每个单独的promise对象都被实现了。

最重要的是，当我单击 tvshows 按钮时，我得到了以下两点安慰。

(1) 同一部电影 array 的 ID 未更新，选项更改为 tv，但是我得到了一堆带有“status_message 的承诺：“您请求的资源可以找不到”，因为我基本上是在尝试使用电影 ID 检索承诺，但使用 tvshow 选项。

然后，

(2) 然后结果改变了，一切都如我所料。也就是说选项保持不变，在上面的步骤中更改，array 得到更新，并且各个承诺对象都已实现。

发生了什么事？

我知道这是因为我在 JSX 中使用了 array id 的代码。我想我只需要在 useEffect 具有运行并且更新 so 数组之后调用 array.map() 部分，但是如何执行此操作以及为什么 useEffect 不是第一次运行ning？

这是代码。


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 似乎是异步的。所以点击“电视节目”会导致：

option 更改为“电视”（array 保持不变）
console.log(array); console.log(option);
使用新 option 和旧 array
console.log('HERE'); fetchArrayByPage(...)
一段时间过去了
setArray(res)
使用新 option 和新 array

您应该从您的 handle*Click 处理程序中调用 fetchArrayByPage：

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

为什么我在控制台中得到一个空数组和不正确的数据？

Why am I getting an empty array and incorrect data fetching in console?

javascript

events

promise

reactjs

use-effect