状态对象值不会更新

Question

我尝试使用 React 创建电影名称的下拉菜单。 每当下拉菜单选择更改时，应通过将该值与“movies”数组状态中的对象 ID 进行比较来更新“currentMovie”状态的值

这是我的代码：

import { useState } from 'react';
import MovieComp from './Movie';

function ParentComp(props) {
  
const [movies, setMovies] = useState( [ { id : 1 , name : "Under the Dome", pic :
      "https://static.tvmaze.com/uploads/images/medium_portrait/81/202627.jpg" },
      { id : 2 , name : "Person of Interest", pic :
      "https://static.tvmaze.com/uploads/images/medium_portrait/163/407679.jpg" },
      { id : 3 , name : "Bitten", pic :
      "https://static.tvmaze.com/uploads/images/medium_portrait/0/15.jpg" } ] )

  const [currentMovie, setCurrentMovie] = useState( {id : "" , name : "", pic : "" } )

  function createDropMenu() {
    return movies.map( item => {
      return <option key={item.id} value={item.id} > {item.name} </option>
    } )
  }

  function updateMovie(e) {
    if (e.target.value === 0) {
      console.log("test")
      let selectedMovie = {id : "" , name : "", pic : "" };
      let selectedMovieEntries = Object.entries(selectedMovie);
      selectedMovieEntries.map( entry => {
        setCurrentMovie( prev => ( {...prev, [ entry[0] ]: entry[1] } ) );
      })
      
    } else {
      console.log("test")
      let selectedMovie = movies.find( item => item.id === e.target.value );
      let selectedMovieCopy = {};
      selectedMovieCopy = {...selectedMovie};
      let selectedMovieEntries = Object.entries(selectedMovieCopy);
      selectedMovieEntries.map( entry => {
        setCurrentMovie( prev => ( {...prev, [ entry[0] ]: entry[1] } ) );
      }) 
    }
  }

  return (
    <div  >
      <h3> Pick a movie: </h3> 
      <select onChange={updateMovie}>
        <option value={0} ></option>
        {createDropMenu()}
      </select> <br/>

      <MovieComp name = {currentMovie.name} pic = {currentMovie.pic} /> 
    </div>
  );
}

export default ParentComp;

由于某种原因，当前电影状态在更改选择时不会更改其值 我错过了什么？

Answer 1

这会产生一个空数组：

let selectedMovieEntries = Object.entries(selectedMovie);

因此

.map()

永远不会迭代数组，并且

setCurrentMovie

永远不会被调用。

退一步...

updateMovie

似乎过度设计了。如果您需要知道的是“当前选择”哪部“电影”，那么这只不过是该“电影”记录的

id

。例如：

// Initial state is undefined, since nothing is selected
const [currentMovie, setCurrentMovie] = useState()

// later...
// Then in the JSX just update state with the selected value
<select onChange={e => setCurrentMovie(e.target.value)}>

到那时，您根本不需要整个

updateMovie

功能。然后，每当您需要获取当前选择的电影时，只需从该列表中获取它即可。例如：

<MovieComp movie={movies.find(m => m.id === currentMovie)} />

或者，如果该组件由于某种原因确实需要两个单独的道具，请在渲染时获取当前电影：

const selectedMovie = movies.find(m => m.id === currentMovie);

并在标记中使用它：

<MovieComp name={currentMovie?.name} pic={currentMovie?.pic} />

这样做的好处是您不再在状态中复制数据。 “当前电影”只是对数据的引用，而不是数据的副本。