将状态传递给我的 useState 挂钩后，它是未定义的，为什么？

Question

我正在使用 google youtube api 流式传输一些视频。不幸的是，当用户点击视频时，我被困在传递视频细节上。（我知道警告，将通过在缩略图中添加索引来解决此问题）。

问题是（它也在帖子的中间，但我害怕它会丢失）：为什么 hss mysearchedValue.videos更改为 undefined？

我得到了一个工作版本：当我点击视频的缩略图时，我得到了预期的结果。

这是它的代码：

应用程序.js

import React, { useState, createContext } from "react";

import NavBar from "./NavBar";

import youtube from "../apis/youtube";

import VideoList from "./VideoList";

import VideoDetail from "./VideoDetail";

export const VideoContext = createContext();

function App() {

    const [ searchedValue, setSearchedValue ] = useState({ videos: [], selectedVideo: null });

    const API_KEY = process.env.REACT_APP_API_KEY;

    const handleSearch = async (inputText) => {

        const response = await youtube.get("/search", {

            params: {

                q: inputText,

                part: "snippet",

                type: "video",

                maxResults: 5,

                key: API_KEY

            }

        });

        setSearchedValue({ videos: response.data.items });

    };

    const handleSelectedVideo = (singleRenderedVideo) => {

        console.log("from App.js: ", singleRenderedVideo);

        // setSearchedValue({ selectedVideo: singleRenderedVideo });

    };

    return (

        <div className="ui container">

            <NavBar handleSearch={handleSearch} />

            <VideoContext.Provider value={handleSelectedVideo}>

                <p>I got {searchedValue.videos.length} results.</p>

                {/* <VideoDetail video={searchedValue.selectedVideo} /> */}

                <VideoList handleSelectedVideo={handleSelectedVideo} listOfVideos={searchedValue.videos} />

            </VideoContext.Provider>

        </div>

    );

}

export default App;

Answer 1

在类组件中，如果您设置状态并仅提供部分对象，react 将与完整状态进行浅合并。这不会发生在功能组件中。无论您将状态设置为什么，这就是状态。所以这段代码：setSearchedValue({ selectedVideo: singleRenderedVideo })...将状态设置为仅具有 selectedVideo 属性的对象。它不再具有视频属性。你有两个选择：自己做一个浅合并setSearchedValue(previous => ({&nbsp; ...previous,&nbsp; selectedVideo: singleRenderedVideo}));有两个独立的状态变量。对于像你这样的情况，我建议这样做。const [ videos, setVideos ] = useState([]);const [ selectedVideo, setSelectedVideo ] = useState(null);// ...setSelectedVideo(singleRenderedVideo);

Answer 2

searchedValue 设置为 {selectedVideo:...}。另一个属性，因为新值不具有该属性。当您设置 searchedValue 时，您应该包含您的视频属性。它应该是 setSearchedValue ({...searchedValue, selectedVideo: newValue})