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

Question

我正在使用 google youtube api 流式传输一些视频。不幸的是，当用户点击视频时，我被困在传递视频细节上。（我知道警告，将通过在缩略图中添加索引来解决此问题）。问题是（它也在帖子的中间，但我害怕它会丢失）：为什么 hss mysearchedValue.videos更改为 undefined？我得到了一个工作版本：当我点击视频的缩略图时，我得到了预期的结果。这是它的代码：应用程序.jsimport 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 => ({

  ...previous,

  selectedVideo: singleRenderedVideo

}));

有两个独立的状态变量。对于像你这样的情况，我建议这样做。

const [ videos, setVideos ] = useState([]);

const [ selectedVideo, setSelectedVideo ] = useState(null);

// ...

setSelectedVideo(singleRenderedVideo);

Answer 2

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