#reactjs #callback #render #timing
Вопрос:
У меня есть компонент, который проверяет наличие уникальных кодов в моем бэкэнде SQL. Это отлично работает. Каков правильный синтаксис реакции для вызова кода, когда он мне нужен, сразу после нажатия кнопки «Сохранить» и до обновления базы данных SQL (при условии, что возвращаемый код уникален).
В настоящее время компонент VerifySiteCodeComponent вызывается только при первоначальном рендеринге. Как переместить вызов внутрь процедуры saveCpyMaster или принудительно запустить его при нажатии кнопки Сохранить?
Я включил код для компонента VerifySiteCodeComponent для дополнительной ясности и возможной помощи в решении.
Вероятно, простое решение для кого-то, только не для меня. Все еще новичок в мире реакций. @davidsz — есть идеи
…
import React, { Component } from 'react'
import VerifySiteCodeComponent from './VerifySiteCodeComponent';
class ParentComponent extends Component {
constructor(props) {
super(props)
this.state = {
cpymasterid:13,
sitemasterCode:'AZ302',
uniquehere:true,
answer:'not yet'
}
this.changeUnique = this.changeUnique.bind(this);
}
componentDidMount(){
}
changeUnique = (unique) =>{
this.setState({uniquehere: unique})
if (this.state.uniquehere)
{
this.setState({answer:"True"})
} else {
this.setState({answer:"False"})
}
}
saveCpyMaster(){
//Need result from <VerifySiteCodeComponent> here
//after data entry and before I update the SQL file.
//How do I do that?
}
render() {
return (
<div>
<button className="btn btn-success" onClick={this.saveCpyMaster}>Save</button>
<VerifySiteCodeComponent onUpdate={this.changeUnique} cpymasterid={this.state.cpymasterid} sitemasterCode={this.state.sitemasterCode}/>
{this.state.answer}
{this.state.cpymasterid}
</div>
)
}
}
export default ParentComponent
import { Component } from 'react';
import SiteMasterService from '../Services/SiteMasterService'
//-------------
class VerifySiteCodeComponent extends Component {
constructor (props){
super(props)
this.state = {
unique:true,
check_cpymasterid: this.props.cpymasterid,
check_sitemasterCode: this.props.sitemasterCode
}
}
componentDidMount()
{
SiteMasterService.getSiteMastersByCode(this.state.check_sitemasterCode).then((res) => {
for (let i = 0; i < res.data.length; i )
{
if (parseInt(res.data[i].cpymaster_cpymasterId,10) === this.state.check_cpymasterid )
{
this.setState({unique:false})
}
}
this.props.onUpdate(this.state.unique)
});
}
render() {
return this.state.unique;
}
}
export default VerifySiteCodeComponent;
…
Комментарии:
1. Есть ли причина, по которой вы используете компонент для визуализации этой функции, а не просто делаете его вызовом функции, который затем можно использовать в методе жизненного цикла/по щелчку мыши? Действительно ли компонент отображает какие-либо JSX?
2. Отличный вопрос. Я хорошо кодирую компоненты, функции меня портят, я получаю все эти ошибки. Я добавил код компонента VerifySiteCodeComponent в исходный вопрос для ясности, ему не нужно ничего отображать, просто обновите переменную «uniquehere», чтобы я мог использовать ее, чтобы убедиться, что я не обновляю свой SQL дубликатами кодов. Мне нужно, чтобы это произошло, когда я нажму кнопку «Сохранить» и до выполнения кода в saveCpyMaster. Любая помощь в понимании того, как обойти эту проблему с курицей или яйцом, была бы отличной, так как мне нужно понять решение этой проблемы для других проблем.@ Дилан Ли
Ответ №1:
Я не могу объяснить это идеально(потому что я не часто работаю с компонентами класса), но я думаю, что для этого onClick вам нужно использовать функции со стрелками или «привязку».
попробуйте сделать это:
saveCpyMaster = () => {
your code here...
}
и сделайте этот щелчок вот так onClick = {()=>this.saveCpyMaster()}
я думаю, что это поможет и решит вашу проблему, но вам следует прочитать о функциях стрелок и привязке(я понимаю, что мне тоже нужно прочитать mroe XD)
Комментарии:
1. Мне действительно нравится использовать функции со стрелками, но это на самом деле не решает проблему, функции со стрелками являются синтаксическим сахаром поверх обычных функций. Его ошибка связана не с вызовом по щелчку, а с тем, как преобразовать код в нужное место. Привязка необходима только в том случае, если вы пытаетесь использовать » это » в вызываемой функции. Пожалуйста, ознакомьтесь с этой документацией reactjs.org/docs/handling-events.html
Ответ №2:
Основываясь на логике вашего компонента VerifySiteCodeComponent, он, вероятно, не должен быть его собственным компонентом. Я бы переместил логику в служебную функцию и передал переменные, которые вы держите в ее состоянии, в качестве аргументов функции. Так что что-то вроде
export function verify_code(check_code, check_id, change_unique){
let unique = true;
SiteMasterService.getSiteMastersByCode(check_code).then((res) => {
for (let i=0; i<res.data.length; i ) {
if (parseInt(res.data[i].cpymaster_cpymasterId,10) === check_id){
unique = false;
}
}
change_unique(this.state.unique)
return unique
}
Это позволит вам импортировать и вызывать функцию в componentDidMount, если это необходимо, а также в обработчике onclick saveCPYMaster.
Взгляните на этот ресурс для создания файлов внешних утилит. Это может помочь вам справиться с ошибками, с которыми вы сталкиваетесь при работе с функциями. https://www.pluralsight.com/guides/importing-utility-functions-in-reactjs