Reactで値渡しで参照するのではなく、どのように渡すのですか？

Question

私はLookupPage.jsxとAccountDetails.jsxのファイルを持っています。ルックアップ

this.updateCustomer = (customer) => { 

    if(JSON.stringify(customer.address) !== JSON.stringify(this.state.activeAccount.customer.address)) { 
      console.log('address changed'); 
      customer.update_address = true; 
      customer.address.source = 'user'; 
     } 
    return fetch(
     `${API_ENDPOINT}/customer/${customer.id}/`, 
     { 
      method: 'PATCH', 
      headers: { 
       'Authorization': 'Token ' + this.props.session_token, 
        'Content-Type': 'application/json', 
      }, 
      body: JSON.stringify(customer), 
     } 
    ).then(restJSONResponseToPromise).then(responseJSON => { 
     if(responseJSON.results){ 
      console.log('update customers client side.') 
     } 
    }, clearSessionIfInvalidToken(this.props.clearSession)); 
}; 

<AccountsDetailModal 
    show={this.state.showAccountDetail} 
    close={this.toggleAccountDetail} 
    customer={this.state.activeAccount.customer} 
    updateCustomer={this.updateCustomer} 
/> 

側AccountDetailsで

this.onChangeAddress = (e) => { 
    const customer = {...this.state.customer}; 
    const address = customer.address; 
    address[e.target.name] = e.target.value; 
    customer.address = address; 
    this.setState({customer, errors: { 
     ...this.state.errors, 
     [e.target.name]: [], 
    }}); 
}; 

this.saveCustomer =() => { 
    this.setState({postDisable: true}); 
    const errors = this.getFormErrors(); 
    const hasErrors = !every(errors, (item) => !item.length); 
    if(!hasErrors){ 
     this.props.updateCustomer(this.state.customer); 
    } else { 
     sweetAlert('Error!', 'Form is invalid.', 'error'); 
    } 
    this.setState({postDisable: false}); 
}; 

this.componentDidMount =() => { 
    this.setState({customer: this.props.customer}); 
} 

で

私は顧客を更新しています対処し、それがアクティブなアカウントを更新して対処するので、それは参照によって渡されているように思えます。私は、アドレスが変更された/元のアドレスと異なる場合にのみ、顧客アドレスを更新することを望んでいます。これを行うために私のコードをどのように変更すればよいですか？

Answer 1

あなたは渡すことで（あなたが反応使ったりしていないかどうか）JSの値によって任意のオブジェクトを渡すことができます。代わりに、オブジェクト自体の引数として

JSON.parse(JSON.stringify(myObject))

を。

これは、オブジェクトを複製してコピーを渡すだけなので、オリジナルに影響を与えずにコピーを操作できます。

オブジェクトに関数が含まれている場合、これは機能しません。プロパティのみがコピーされます。 （あなたの例では、これは問題ないはずです。）私はここに私の2セントを置くつもりです

Answer 2

：すべての

まず、これはReactには本当に固有のものではなく、JS関連の質問の多くをです。

第2に、内部状態に対する小道具の設定は、反応するときに悪い習慣とみなされます。あなたの特定のシナリオを考えれば、それは本当に必要ありません。私はあなたのコード内の特定の時点でオブジェクトに渡された元を変異されているので、だから、あなたの問題に来て、あなたが参照の問題を抱えている理由は

this.setState({customer: this.props.customer});

を参照しています。

this.updateCustomer = (customer) => { 

    if(JSON.stringify(customer.address) !== JSON.stringify(this.state.activeAccount.customer.address)) { 
      console.log('address changed'); 
      customer.update_address = true; 
      customer.address.source = 'user'; 
     } 
}; 

あなたのコンポーネントの他の方法に回される可能性が非常に高いです引数オブジェクトの元の小道具を変異されています。たとえば、私が見た場合。

const updatedCustomer = Object.assign({}, customer, { 
    update_address: true 
}); 

をそして、あなたはあなたのAPI呼び出しでupdatedCustomerに渡すことができますので、あなたがすることができることを克服します。 Object.assign()は、渡されたオブジェクトに対して操作を実行しませんが、新しいオブジェクトを返します。したがって、アプリ内の任意のポイントで元のオブジェクトに変更を加えていないことを確認できます。

注：Object.assignはネストされていないプレーンオブジェクトで動作します。したがって、ネストされたオブジェクトのプロパティでも同様に動作するようにするには、lodash mergeを使用できます。