私のテストアプリケーションでReactJSの問題

Question

私は最初のReactJSアプリを通して作業してきました。シンプルなフォームで、映画名を入力すると、IMDBのデータがフェッチされ、ページのモジュールとして追加されます。それはすべて正常に動作しています。

しかし、各ムービーモジュールには削除ボタンがあり、その特定のモジュールを削除して再レンダリングを開始する必要があります。クリックしたボタンに関係なく、最後にクリックしたムービーモジュールを削除するのではなく、追加したムービーモジュールを常に削除するので、うまくいきません。

アプリケーション： http://lukeharrison.net/react/

Githubのコードベース：誰もがこの背後にある理由を見つけることができる場合、私はちょうど思ったんだけど https://github.com/WebDevLuke/React-Movies

？

乾杯！

Answer 1

ちょうどいいですが、地図機能のインデックスだけでなく、ユニークなkeyを使用する必要があります。このようにして、Reactは映画が何らかの反復指数ではなく実際の価値によって識別され、おそらくあなたの問題を解決することを理解するでしょう。

var movies = this.state.movies.map(function(movie, index){ 
    return (
    <Movie key={movie} useKey={index} removeMovieFunction={component.removeMovie} search={movie} toggleError={component.toggleError} /> 
); 
}); 

、あなたの特性を再評価し、何も変わっていないことを見て、単にリストから最後<Movie />を削除し反応するためこれがあります。各ムービーのcomponentDidMount機能が複数回実行されることはなく、ムービー1、ムービー2、ムービー3の状態は維持されます。だからthis.props.searchはcomponentDidMountでのみ使用されているので、search={movie}を提供しても何もしません。

Answer 2

データセットが正常に表示されるため、レンダリングが正しく行われない理由がわかりません。

コードを見てみると、私は

var index = this.state.movies.indexOf(movieToRemove); 
console.log(this.state.movies); 

if (index > -1) { 
    this.state.movies.splice(index, 1); 
} 

console.log(this.state.movies); 
this.setState(this.state.movies); 

...これにあなたのremove関数を変更します私の仮定は、状態が正しく更新されていない、ということです。状態を更新するときはいつでも、setStateを使うべきです（ただし、規約が変更されていて、私が気づいていない限り）。

また、明示的にforceUpdateを呼び出す必要はありません。 setStateが呼び出されると、Reactは自動的に必要な処理を行い、新しい状態で再レンダリングします。

Answer 3

状態は、最上位のコンポーネント（コンテナと呼ばれます）から一方向（上から下に渡す）にする必要があります。この例では、トップレベルのコンポーネントに検索文字列を記述し、IMDB APIを介して「ムービー」コンポーネント自体から個別のムービーデータをロードします。

トップレベルのコンテナですべての状態を処理し、完全なムービーデータをダム "ムービー"コンポーネントに渡すだけのコードをリファクタリングする必要があります。気にする必要があるのは、渡すものを小道具でレンダリングすることであり、独自のデータを取得することではありません。