機能コンポーネントReactでsetStateを使用する方法は?

アフマド・ナディーム

私はクラスを使用していました。機能部品に変更しました。しかし、handleLikeメソッドでは。setStateの使い方がわからないようです。それを行う方法について何か助けはありますか?私の現在のuseStateでは、オブジェクトの配列を取得しています。「いいね」ボタンをクリックすると、movies.mapが機能していないというエラーが表示されます。ありがとうございました

movies.jsx

import React, { Component, useState } from "react";
import { getMovies } from "../services/fakeMovieService";
import Like from "./like";
function Movies() {
  const initialMovies = getMovies();
  const [movies, setMovies] = useState(initialMovies);

  const handleDelete = (movie) => {
    setMovies((movies) => movies.filter((m) => m._id !== movie._id));
  };

    const handleLike = (movie) => {
        const movies = [...movies]
        const index = movies.indexOf(movie)
        movies[index] = { ...movie[index]}
        movies[index].liked = !movies[index].liked
        setMovies({ movies })
  };
  const { length: count } = movies;
  if (count === 0) return <p>There are no movies in database</p>;
  return (
    <React.Fragment>
      <p> Showing {count} movies in the database</p>
      <table className="table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Genre</th>
            <th>Stock</th>
            <th>Rate</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {movies.map((movie) => (
            <tr key={movie._id}>
              <td>{movie.title}</td>
              <td>{movie.genre.name}</td>
              <td>{movie.numberInStock}</td>
              <td>{movie.dailyRentalRate}</td>
              <td>
                <Like liked={movie.liked} onClick={()=> handleLike(movie)} />
              </td>
              <td>
                <button
                  onClick={() => handleDelete(movie)}
                  className="btn btn-danger btn-sm"
                >
                  Delete
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </React.Fragment>
  );
}

Like.jsx

   class Like extends React.Component {
    render() {
        let classes = "fa fa-heart";
        if (!this.props.liked) classes+= "-o"
        return (
          <i
            className={classes}
            aria-hidden="true"
                onClick={this.props.onClick}
                style={{cursor:"pointer"}}
          ></i>
        );
    }
}

JSONファイル

const movies = [
  {
    _id: "5b21ca3eeb7f6fbccd471815",
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
    numberInStock: 6,
    dailyRentalRate: 2.5,
        publishDate: "2018-01-03T19:04:28.809Z",
    liked: true,
  },
  {
    _id: "5b21ca3eeb7f6fbccd471816",
    title: "Die Hard",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
    numberInStock: 5,
    dailyRentalRate: 2.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd471817",
    title: "Get Out",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
    numberInStock: 8,
    dailyRentalRate: 3.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd471819",
    title: "Trip to Italy",
    genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
    numberInStock: 7,
    dailyRentalRate: 3.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd47181a",
    title: "Airplane",
    genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
    numberInStock: 7,
    dailyRentalRate: 3.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd47181b",
    title: "Wedding Crashers",
    genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
    numberInStock: 7,
    dailyRentalRate: 3.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd47181e",
    title: "Gone Girl",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
    numberInStock: 7,
    dailyRentalRate: 4.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd47181f",
    title: "The Sixth Sense",
    genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
    numberInStock: 4,
    dailyRentalRate: 3.5
  },
  {
    _id: "5b21ca3eeb7f6fbccd471821",
    title: "The Avengers",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
    numberInStock: 7,
    dailyRentalRate: 3.5
  }
];

export function getMovies() {
  return movies;
}
ライアン・ル

コードにいくつかの冗長なオブジェクト/配列の割り当てがあります

だから、あなたのhandleLikeように更新してください

const handleLike = (movie) => {
    const _movies = [...movies];
    const index = movies.indexOf(movie);
    _movies[index].liked = !movies[index].liked;
    setMovies(_movies);
  };

実例:

lively-worker-vhmi6を編集する

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

react jsの機能コンポーネントでrefを作成する方法は?

機能コンポーネントでReactの小道具にジェネリックを使用する方法は?

機能コンポーネントでgetChildContextを使用する方法

機能コンポーネントでcomponentWillReceivePropsを使用する方法

機能コンポーネントで静的navigationOptionsを使用する方法は?

React:機能的なusestate / useEffectを使用して特定のコンポーネントクラスのsetstateコールバックの例を複製する方法は?

Reactでクラスコンポーネントを機能コンポーネントに変換する方法

React機能コンポーネントでif..elseif ... elseタイプをレンダリングする方法は?

機能コンポーネントでdisplayNameを設定する方法[React]

React機能コンポーネントで古い状態を回避する方法

ReactステートレスコンポーネントでES6マップ機能を使用する方法

Reactで兄弟コンポーネントの機能をトリガーする方法は?

React機能コンポーネント内でasync / awaitを使用する

このReactコンポーネントで検索機能をデバウンスする方法は?

ReactでChrome拡張機能のコンポーネントを切り替える方法は何ですか?

機能的なReactコンポーネントでpromiseの値を使用することは可能ですか?

React機能コンポーネントでsetIntervalタイマーを適切に設定する方法は?

reactとtypescriptを使用してreact機能コンポーネント内で子をレンダリングする方法は?

Reactコンポーネントと機能、何を使用する必要があり、その理由は何ですか?

反応ネイティブで機能コンポーネントのメソッドをクラスコンポーネントに使用する方法は?

React with TypescriptのクラスコンポーネントでsetStateのように機能するカスタムフックを作成する方法

機能コンポーネントを使用してAntDesignでタブを追加および削除する方法は?

機能的な方法でフックを使用してreactコンポーネントを更新するにはどうすればよいですか?

機能コンポーネントでネストされた要素をレンダリングする方法は?

反応機能コンポーネントでuseRefフックを適切に使用する方法は?

酵素では、機能コンポーネントの小道具から機能を取得する方法は?

機能コンポーネントを使用してReactアイコンをエクスポートする方法は?

onChangeに従ってReact機能コンポーネントで再レンダリングする方法は?

Reactでクラスコンポーネントを機能コンポーネントに変換する

TOP 一覧

  1. 1

    グラフからテーブルに条件付き書式を適用するにはどうすればよいですか?

  2. 2

    ソートされた検索、ターゲット値未満の数をカウント

  3. 3

    Unity:未知のスクリプトをGameObject(カスタムエディター)に動的にアタッチする方法

  4. 4

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  5. 5

    Ansibleで複数行のシェルスクリプトを実行する方法

  6. 6

    Reactでclsxを使用する方法

  7. 7

    tkinterウィンドウを閉じてもPythonプログラムが終了しない

  8. 8

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  9. 9

    Pythonを使用して同じ列の同じ値の間の時差を取得する方法

  10. 10

    PowerShellの分割ファイルへのヘッダーの追加

  11. 11

    Chromeウェブアプリのウェブビューの高さの問題

  12. 12

    BLOBストレージからデータを読み取り、Azure関数アプリを使用してデータにアクセスする方法

  13. 13

    Crashlytics:コンパイラー生成とはどういう意味ですか?

  14. 14

    GoDaddyでのCKEditorとKCfinderの画像プレビュー

  15. 15

    Windows 10の起動時間:以前は20秒でしたが、現在は6〜8倍になっています

  16. 16

    MLでのデータ前処理の背後にある直感

  17. 17

    モーダルダイアログを自動的に閉じる-サーバーコードが完了したら、Googleスプレッドシートのダイアログを閉じます

  18. 18

    reCAPTCHA-エラーコード:ユーザーの応答を検証するときの「missing-input-response」、「missing-input-secret」(POSTの詳細がない)

  19. 19

    STSでループプロセス「クラスパス通知の送信」のループを停止する方法

  20. 20

    ファイル内の2つのマーカー間のテキストを、別のファイルのテキストのセクションに置き換えるにはどうすればよいですか?

  21. 21

    ネットワークグラフで、ネットワークコンポーネントにカーソルを合わせたときに、それらを強調表示するにはどうすればよいですか?

ホットタグ

アーカイブ