Javascript 反应更新其他组件数据_Javascript_React Native_State

Javascript 反应更新其他组件数据

javascript react-native

Javascript 反应更新其他组件数据,javascript,react-native,state,Javascript,React Native,State,我正在尝试更新另一个组件的数据，具体取决于我从列表组件中单击的项目我有一个“电影”列表（只是电影标题）。当我从列表中单击电影标题时，我希望另一个组件显示其信息（标题和描述）页面组件 export default ({ movies }) => { return ( <div id="home"> <div className="movies"> <List movies={m

我正在尝试更新另一个组件的数据，具体取决于我从列表组件中单击的项目

我有一个“电影”列表（只是电影标题）。当我从列表中单击电影标题时，我希望另一个组件显示其信息（标题和描述）

页面组件

export default ({ movies }) => {
  return (
    <div id="home">
      <div className="movies">
        <List movies={movies}/>
      </div>
      <div className="">
        <Info movies={movies}/>
      </div>
    </div>
  );
}

export default ({ movies }) => {
  return (
    <ul>
      {movies.map((movie, index) =>
        <li key={index}>
          {movie.title}
        </li>
      )}
    </ul>
  );
}

export default ({ movies }) => {
  return (
    <div className="movie">
      <h2>{movies.title}</h2>     //Active movie title
      <p>{movies.description}</p> //Active movie description
    </div>
  );
}

export default ({ movie }) => {
  // single movie
  return (
    <div className="movie">
      <h2>{movie.title}</h2>     
      <p>{movie.description}</p>
    </div>
  );
}

导出默认值（{movies}）=>{
返回(
);
}

列表组件

export default ({ movies }) => {
  return (
    <div id="home">
      <div className="movies">
        <List movies={movies}/>
      </div>
      <div className="">
        <Info movies={movies}/>
      </div>
    </div>
  );
}

export default ({ movies }) => {
  return (
    <ul>
      {movies.map((movie, index) =>
        <li key={index}>
          {movie.title}
        </li>
      )}
    </ul>
  );
}

export default ({ movies }) => {
  return (
    <div className="movie">
      <h2>{movies.title}</h2>     //Active movie title
      <p>{movies.description}</p> //Active movie description
    </div>
  );
}

export default ({ movie }) => {
  // single movie
  return (
    <div className="movie">
      <h2>{movie.title}</h2>     
      <p>{movie.description}</p>
    </div>
  );
}

导出默认值（{movies}）=>{
返回(

{movies.map（（电影，索引）=>

{movie.title}

)}

);
}

信息组件

export default ({ movies }) => {
  return (
    <div id="home">
      <div className="movies">
        <List movies={movies}/>
      </div>
      <div className="">
        <Info movies={movies}/>
      </div>
    </div>
  );
}

export default ({ movies }) => {
  return (
    <ul>
      {movies.map((movie, index) =>
        <li key={index}>
          {movie.title}
        </li>
      )}
    </ul>
  );
}

export default ({ movies }) => {
  return (
    <div className="movie">
      <h2>{movies.title}</h2>     //Active movie title
      <p>{movies.description}</p> //Active movie description
    </div>
  );
}

export default ({ movie }) => {
  // single movie
  return (
    <div className="movie">
      <h2>{movie.title}</h2>     
      <p>{movie.description}</p>
    </div>
  );
}

导出默认值（{movies}）=>{
返回(
{movies.title}//活动电影标题
{movies.description}//活动电影描述
);
}

实现这一点的简单方法是在页面组件内部或包装器组件中处理

电影
页面组件
export default ({ movies }) => {
  return (
    <div id="home">
      <div className="movies">
        <List movies={movies}/>
      </div>
      <div className="">
        <Info movies={movies}/>
      </div>
    </div>
  );
}

export default ({ movies }) => {
  return (
    <ul>
      {movies.map((movie, index) =>
        <li key={index}>
          {movie.title}
        </li>
      )}
    </ul>
  );
}

export default ({ movies }) => {
  return (
    <div className="movie">
      <h2>{movies.title}</h2>     //Active movie title
      <p>{movies.description}</p> //Active movie description
    </div>
  );
}

export default () => {
  const [movies, setMovies] = useState([
    { title: "Movie Title 1", id: 1, active: false },
    { title: "Movie Title 2", id: 2, active: false },
    { title: "Movie Title 3", id: 3, active: false },
  ]);

  const onMovieClick = useCallback(
    (movie) => {
      setMovies(
        movies.map(({ id, ...other }) =>
          id === movie.id
            ? { ...other, id, active: true }
            : { ...other, id, active: false }
        )
      );
    },
    [movies, setMovies]
  );

  const selectedMovie = movies.filter(({ active }) => !!active);

  return (
    <div>
      <ListComponent movies={movies} onMovieClick={onMovieClick} />
      {selectedMovie.length ? (
        <InfoComponent movie={selectedMovie[0]} />
      ) : (
        "No movie selected"
      )}
    </div>
  );
};

export default ({ movie }) => {
  // single movie
  return (
    <div className="movie">
      <h2>{movie.title}</h2>     
      <p>{movie.description}</p>
    </div>
  );
}

信息组件
export default ({ movies }) => {
  return (
    <div id="home">
      <div className="movies">
        <List movies={movies}/>
      </div>
      <div className="">
        <Info movies={movies}/>
      </div>
    </div>
  );
}

export default ({ movies }) => {
  return (
    <ul>
      {movies.map((movie, index) =>
        <li key={index}>
          {movie.title}
        </li>
      )}
    </ul>
  );
}

export default ({ movies }) => {
  return (
    <div className="movie">
      <h2>{movies.title}</h2>     //Active movie title
      <p>{movies.description}</p> //Active movie description
    </div>
  );
}

export default ({ movie }) => {
  // single movie
  return (
    <div className="movie">
      <h2>{movie.title}</h2>     
      <p>{movie.description}</p>
    </div>
  );
}

导出默认值（{movie}）=>{
//单曲
返回(
{movie.title}
{movie.description}
);
}
实现这一点的简单方法是在页面组件内部或包装器组件中处理电影
页面组件
export default ({ movies }) => {
  return (
    <div id="home">
      <div className="movies">
        <List movies={movies}/>
      </div>
      <div className="">
        <Info movies={movies}/>
      </div>
    </div>
  );
}

export default ({ movies }) => {
  return (
    <ul>
      {movies.map((movie, index) =>
        <li key={index}>
          {movie.title}
        </li>
      )}
    </ul>
  );
}

export default ({ movies }) => {
  return (
    <div className="movie">
      <h2>{movies.title}</h2>     //Active movie title
      <p>{movies.description}</p> //Active movie description
    </div>
  );
}

export default () => {
  const [movies, setMovies] = useState([
    { title: "Movie Title 1", id: 1, active: false },
    { title: "Movie Title 2", id: 2, active: false },
    { title: "Movie Title 3", id: 3, active: false },
  ]);

  const onMovieClick = useCallback(
    (movie) => {
      setMovies(
        movies.map(({ id, ...other }) =>
          id === movie.id
            ? { ...other, id, active: true }
            : { ...other, id, active: false }
        )
      );
    },
    [movies, setMovies]
  );

  const selectedMovie = movies.filter(({ active }) => !!active);

  return (
    <div>
      <ListComponent movies={movies} onMovieClick={onMovieClick} />
      {selectedMovie.length ? (
        <InfoComponent movie={selectedMovie[0]} />
      ) : (
        "No movie selected"
      )}
    </div>
  );
};

export default ({ movie }) => {
  // single movie
  return (
    <div className="movie">
      <h2>{movie.title}</h2>     
      <p>{movie.description}</p>
    </div>
  );
}

信息组件
export default ({ movies }) => {
  return (
    <div id="home">
      <div className="movies">
        <List movies={movies}/>
      </div>
      <div className="">
        <Info movies={movies}/>
      </div>
    </div>
  );
}

export default ({ movies }) => {
  return (
    <ul>
      {movies.map((movie, index) =>
        <li key={index}>
          {movie.title}
        </li>
      )}
    </ul>
  );
}

export default ({ movies }) => {
  return (
    <div className="movie">
      <h2>{movies.title}</h2>     //Active movie title
      <p>{movies.description}</p> //Active movie description
    </div>
  );
}

export default ({ movie }) => {
  // single movie
  return (
    <div className="movie">
      <h2>{movie.title}</h2>     
      <p>{movie.description}</p>
    </div>
  );
}

导出默认值（{movie}）=>{
//单曲
返回(
{movie.title}
{movie.description}
);
}
这可能会有所帮助
// List Component
export default ({ movies }) => {
  // set default selected state    
  const [selectedMovie, setSelectedMovie] = useState(null); 

  const handleClick = (movie) => {
     setSelectedMovie(movie); // set state here when select movie
  }

  return (
   <View>
     <ul>
      {movies.map((movie, index) =>
        <li key={index} onClick={() => handleClick(movie)}>
          {movie.title}
        </li>
      )}
     </ul>
     // render info comp if movie selected    
     { selectedMovie ? <InfoComponen movie={selectedMovie} /> : null } 
   </View>
  );
}


// Info Componen
export default ({ movie }) => {
  return (
    ........
  );
}

//列表组件
导出默认值（{movies}）=>{
//设置默认选定状态
常量[selectedMovie，setSelectedMovie]=useState（null）；
const handleClick=（电影）=>{
setSelectedMovie（电影）；//选择电影时在此处设置状态
}
返回(

{movies.map（（电影，索引）=>
handleClick（电影）}>
{movie.title}

)}

//渲染信息组件（如果选择了电影）
{selectedMovie？：null}
);
}
//信息组件
导出默认值（{movie}）=>{
返回(
........
);
}
这可能会有所帮助
// List Component
export default ({ movies }) => {
  // set default selected state    
  const [selectedMovie, setSelectedMovie] = useState(null); 

  const handleClick = (movie) => {
     setSelectedMovie(movie); // set state here when select movie
  }

  return (
   <View>
     <ul>
      {movies.map((movie, index) =>
        <li key={index} onClick={() => handleClick(movie)}>
          {movie.title}
        </li>
      )}
     </ul>
     // render info comp if movie selected    
     { selectedMovie ? <InfoComponen movie={selectedMovie} /> : null } 
   </View>
  );
}


// Info Componen
export default ({ movie }) => {
  return (
    ........
  );
}

//列表组件
导出默认值（{movies}）=>{
//设置默认选定状态
常量[selectedMovie，setSelectedMovie]=useState（null）；
const handleClick=（电影）=>{
setSelectedMovie（电影）；//选择电影时在此处设置状态
}
返回(

{movies.map（（电影，索引）=>
handleClick（电影）}>
{movie.title}

)}

//渲染信息组件（如果选择了电影）
{selectedMovie？：null}
);
}
//信息组件
导出默认值（{movie}）=>{
返回(
........
);
}