同じ関数で与えられた小道具と2つの要素を反応させると、どちらかの要素が他の要素に影響を与えます。 -- javascript フィールド と reactjs フィールド 関連 問題

React 2 elements with props given by the same function causes any update of either element to affect the other












0
vote

問題

日本語

私は以下の形式のアプリを持っています。 sort_data 機能は、理解したいと思う非常に奇妙な行動を引き起こしています。

<事前> <コード> class App extends Component{ ... render(){return( <ChartInterface row_data1={sort_data(this.getrow_data1())} row_data2={sort_data(this.getrow_data2())}/> <Controls change_data1={this.control_function1} change_data2={this.control_function2}/> )} function ChartInterface(props){ /* notice props.row_data2 is not used*/ return <div>props.row_data1</div> } /*details*/ function sort_data(xdata){ /* sorting algorithm that takes array of arrays of objects and returns xdata but with the indexes were swapped based on element properties */ return xdata}

<コード> Controls コンポーネントには、 control_function1 または<コード> control_function2 のいずれかを呼び出すことがあります。これらの関数が呼び出されると、 App 9988777665 を呼び出します。これは、いくつかの状態変数を変更する( this.state.x1 に応じて9988877668 )。関数が呼ばれました。

これらの状態変数(<コード> this.state.x1 class App extends Component{ ... render(){return( <ChartInterface row_data1={sort_data(this.getrow_data1())} row_data2={sort_data(this.getrow_data2())}/> <Controls change_data1={this.control_function1} change_data2={this.control_function2}/> )} function ChartInterface(props){ /* notice props.row_data2 is not used*/ return <div>props.row_data1</div> } /*details*/ function sort_data(xdata){ /* sorting algorithm that takes array of arrays of objects and returns xdata but with the indexes were swapped based on element properties */ return xdata} 0 class App extends Component{ ... render(){return( <ChartInterface row_data1={sort_data(this.getrow_data1())} row_data2={sort_data(this.getrow_data2())}/> <Controls change_data1={this.control_function1} change_data2={this.control_function2}/> )} function ChartInterface(props){ /* notice props.row_data2 is not used*/ return <div>props.row_data1</div> } /*details*/ function sort_data(xdata){ /* sorting algorithm that takes array of arrays of objects and returns xdata but with the indexes were swapped based on element properties */ return xdata} 0 )は、それぞれ<コード> 998877611 および<コード> class App extends Component{ ... render(){return( <ChartInterface row_data1={sort_data(this.getrow_data1())} row_data2={sort_data(this.getrow_data2())}/> <Controls change_data1={this.control_function1} change_data2={this.control_function2}/> )} function ChartInterface(props){ /* notice props.row_data2 is not used*/ return <div>props.row_data1</div> } /*details*/ function sort_data(xdata){ /* sorting algorithm that takes array of arrays of objects and returns xdata but with the indexes were swapped based on element properties */ return xdata} 2 によって返されるデータを決定します(つまり、 <コード> class App extends Component{ ... render(){return( <ChartInterface row_data1={sort_data(this.getrow_data1())} row_data2={sort_data(this.getrow_data2())}/> <Controls change_data1={this.control_function1} change_data2={this.control_function2}/> )} function ChartInterface(props){ /* notice props.row_data2 is not used*/ return <div>props.row_data1</div> } /*details*/ function sort_data(xdata){ /* sorting algorithm that takes array of arrays of objects and returns xdata but with the indexes were swapped based on element properties */ return xdata} 3 は<コード> class App extends Component{ ... render(){return( <ChartInterface row_data1={sort_data(this.getrow_data1())} row_data2={sort_data(this.getrow_data2())}/> <Controls change_data1={this.control_function1} change_data2={this.control_function2}/> )} function ChartInterface(props){ /* notice props.row_data2 is not used*/ return <div>props.row_data1</div> } /*details*/ function sort_data(xdata){ /* sorting algorithm that takes array of arrays of objects and returns xdata but with the indexes were swapped based on element properties */ return xdata} 4 のみに影響します。

これまでのとおりに明確にして要約するには:コンポーネントは App16 の状態変化を引き起こします。これは、PROPとして渡されたデータを class App extends Component{ ... render(){return( <ChartInterface row_data1={sort_data(this.getrow_data1())} row_data2={sort_data(this.getrow_data2())}/> <Controls change_data1={this.control_function1} change_data2={this.control_function2}/> )} function ChartInterface(props){ /* notice props.row_data2 is not used*/ return <div>props.row_data1</div> } /*details*/ function sort_data(xdata){ /* sorting algorithm that takes array of arrays of objects and returns xdata but with the indexes were swapped based on element properties */ return xdata} 7 に変更します。新しい class App extends Component{ ... render(){return( <ChartInterface row_data1={sort_data(this.getrow_data1())} row_data2={sort_data(this.getrow_data2())}/> <Controls change_data1={this.control_function1} change_data2={this.control_function2}/> )} function ChartInterface(props){ /* notice props.row_data2 is not used*/ return <div>props.row_data1</div> } /*details*/ function sort_data(xdata){ /* sorting algorithm that takes array of arrays of objects and returns xdata but with the indexes were swapped based on element properties */ return xdata} 8 が作成されます(私の理解に従って)。

My Appは、ユーザが異なるデータリストを選択できる制御コンポーネントを使用し、そのデータは<コード> App19 にフィードバックし、次に<コード> Controls0 にフィードバックします。わかりました。

Controls1 の状態の変更により、getRow_data2が異なるデータを返すと、 Controls2 の動作に影響を与えません(<は使用しません。コード> Controls3 現在)

変な部分:

Controls6 Controls5 99887776626 が実際に App28 を変更した場合/コード>。

control_function10 関数に Controls9 が囲まれている場合にのみ発生します。 すなわち、 998877631 なしでChartInterfaceを初期化すると、コードは予想どおりに動作します。

<事前> <コード> control_function12
英語

I have the an app with the following format. The sort_data function is causing some very strange behavior that I would love to understand.

class App extends Component{     ...      render(){return(         <ChartInterface          row_data1={sort_data(this.getrow_data1())}          row_data2={sort_data(this.getrow_data2())}/>         <Controls          change_data1={this.control_function1}         change_data2={this.control_function2}/>     )}  function ChartInterface(props){     /* notice props.row_data2 is not used*/     return <div>props.row_data1</div> }   /*details*/ function sort_data(xdata){     /* sorting algorithm that takes array of arrays of objects       and returns xdata but with the indexes were swapped based on     element properties */ return xdata} 

The Controls component has children which will sometimes call one of control_function1 or control_function2. When called these functions invoke a setState in App, which changes some state variable (this.state.x1 or this.state.x2 depending on which function was called).

These state variables (this.state.x1 and this.state.x2) determine the data returned by this.getrow_data1() and this.getrow_data2() respectively (i.e. this.state.x2 ONLY affects this.getrow_data2()).

To clarify and summarize so far: Controls component causes state change in App, which changes the data passed as props to <ChartInterface>, and a new <ChartInterface> is created (as per my understanding).

My app uses a control component where users can select different data lists, and that data is fed back to App, and then to <ChartInterface>. OK.

If a change in App's state causes getrow_data2 to return different data, that should not have an impact on the behavior of ChartInterface (it doesn't use prop.row_data2 currently)

The weird part:

when prop.row_data2 is changed by getrow_data2, the return <div>row_data1</div> in ChartInterface is actually returning <div>row_data2</div>.

This ONLY occurs when i have this.getrow_data2() wrapped in my sort_data function. i.e. if I initialize ChartInterface without sort_data the code behaves as expected.

        <ChartInterface          row_data1={this.getrow_data1()}          row_data2={this.getrow_data2()}/> 
</div
     

回答リスト

0
 
vote
vote
ベストアンサー
 

reactO.ComponentのComponentUpdate Lifecycle関数を参照してください。 たとえば、<コード> Controls コンポーネントの場合:

<事前> <コード> ... shouldComponentUpdate(nextProps,nextState) { return nextProps.control_function1 != this.props.control_function1 || nextProps.control_function2 != this.props.control_function2; }

このように、その更新イベントが特にcontrol_function1またはcontrol_function2の変更を変更しない限り、コンポーネントはその親からアップデートイベントを受信した場合は更新されません。

注:このコンポーネントに状態がある場合は、 true が変更された場合は、返された true を確認してください。

 

Take a look at React.Component's shouldComponentUpdate lifecycle function. For example, for your Controls component:

... shouldComponentUpdate(nextProps,nextState) {   return nextProps.control_function1 != this.props.control_function1          || nextProps.control_function2 != this.props.control_function2; } 

This way, the component will not update if it receives an update event from its parent unless that update event changes specifically control_function1 or control_function2.

Note: If you have state in this component, make sure you account for that in the return by checking returning true if the state changed.

</div
 
 

関連する質問

0  Reactでフォームを送信する方法  ( How to submit a form in react ) 
反応成分のフェッチで反応成分にはない形式を送ることができるかどうかを知りたいのです。 <事前> <コード> <form action="json.bc" class="form_search" method="post"> <input type="hid...

0  Mock Dispatch関数は呼び出されません  ( Mock dispatch function is not called ) 
非同期アクション作成者のテストを書いていますが、「推定モック機能が「と呼ばれている」と述べた問題に遭遇しました: <事前> <コード> [{"type": "GET_LOGIN_SUCCESS", "value": true}] しかしそれは呼ばれなかっ...

0  クラスベースのAXIOS要求をフックベースのコードに統合する  ( Integrating class based axios request to the hook based code ) 
このクラスベースのAXIOSリクエストをJSONファイルからデータを取得する他のフックベースのコードに統合する方法基本的に私はデータソースの場所をAXIOS GETリクエストと置き換えたいです。ありがとう。 <事前> <コード> componentDidMou...

84  React Statelessコンポーネントのイベントハンドラ  ( Event handlers in react stateless components ) 
React Statelessコンポーネントでイベントハンドラを作成するための最適な方法を見つけようとしています。私はこのようなことができる: <事前> <コード> const myComponent = (props) => { const myH...

0  共有可能なパネルのURLを反応させる  ( React sharable panel url ) 
次のスニペットを検討してください。今すぐボタンをクリックするde 'IE indexroot 私が達成したいのは: "href="http://localhost:3000/de/?open" http:// localhost:3000 / de /? ...

0  反応 - 両親にアクセスする子供たちは早すぎる?  ( React children accessing parents state too early ) 
子からapp.jsにコールバックを使用する場合、app.jsのコールバック関数は要素の状態を設定します。 同じ子関数で、次の行で、関数はこの状態にアクセスします。これはPROPとして渡されます。 この次の行がすでに更新された状態で実行されていることを確認する方...

2  Next.jsとTypeScriptでReact StyleGuidistを設定する  ( Setting up react styleguidist with next js and typescript ) 
私はnext.jsとtypescriptでReact Styleguidistをセットアップしようとしていますが、問題に歩き続けます。 My現在のstyleguide.config.jsは次のようになります: <事前> <コード> const path = r...

1  ReactJS-BootstrapフォームとH1タグを並べて配置する方法  ( How can i put a reactjs bootstrap form and h1 tag side by side ) 
私は私のフォームグループと私のh1タグを横々と横々としたいです。私はディスプレイを使ってみました:インラインブロックと他のさまざまなもののものですが運がなかった。これが私の.cssコードです: <事前> <コード> .testingForm { max-w...

0  Charts RecativeJSを使用してレンダリングのAPIからデータオブジェクトを表示するためのFor Loopを作成します。  ( Make a for loop to show data object from api in render using charts reactjs ) 
チャートのAPIからデータを表示する必要があります( HTTPS) ://canvasjs.com/react-charts/chart-index-data-label/ ) これは私のAPIの前部: <事前> <コード> //API Gains stat...

1  Vanilla JavaScriptを使用してReact App DOMに追加する方法  ( How to append to a react app dom using vanilla javascript ) 
私は私が任意のウェブサイトからテキストを強調することを可能にするクロム拡張を作成しています。 あなたにアイデアを与えるために <事前> <コード> var newDom = document.body.innerHTML; var selection = wi...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有