ReactJS, данные загружаются только тогда, когда я нажимаю на заголовок аккордеона

#javascript #reactjs #zendesk

Вопрос:

Это мое App.js

console.log(customer) здесь отображаются данные на консоли, поэтому я думаю, что с моим API проблем нет.

 let client = null;  let customer_id = null;  var customer = null;    const getCustomerId = () =gt; {    client.get('ticket.requester.id').then(  function(data) {  customer_id = data['ticket.requester.id'].toString();  }  );    var settings = {  url:'/api/sunshine/objects/records?type=Customer',  type:'GET',  dataType: 'json',    };    client.request(settings).then(  function(data) {  var jsonCount = Object.keys(data.data).length;  var x = 0;  console.log(customer_id);  while(x lt; jsonCount) {  var cust = data.data[x];  if (cust.attributes.CustomerID == customer_id) {  customer = data.data[x];  // console.log(customer);  }  x = x   1;  }  console.log(customer);  },  function(response) {  console.error(response.responseText);  }  );  }      const App = () =gt; {    const [expandedSections, setExpandedSections] = useState([]);  const [expandedSections2, setExpandedSections2] = useState([]);  useEffect(() =gt; {  client = window.ZAFClient.init();  getCustomerId();  }, []);    return (  lt;Row justifyContent="center"gt;  lt;Col className="outer_column"gt;    lt;Accordion className="first_accordion"  level={2}  expandedSections={expandedSections}  onChange={index =gt; {  if (expandedSections.includes(index)) {  setExpandedSections(expandedSections.filter(n =gt; n !== index));  } else {  setExpandedSections([index]);  }  }}  gt;  lt;Accordion.Sectiongt;    lt;Accordion.Headergt;  lt;Accordion.Labelgt;Customer Managementlt;/Accordion.Labelgt;  lt;/Accordion.Headergt;  lt;Accordion.Panelgt;  lt;Row justifyContent="center"gt;  lt;Col className="inner_column"gt;  lt;Accordion  isCompact  level={5}  isExpandable  className="second_accordion"  gt;  lt;Accordion.Sectiongt;  lt;Accordion.Headergt;  lt;Accordion.Labelgt;Customer Informationlt;/Accordion.Labelgt;  lt;/Accordion.Headergt;  lt;Accordion.Panel className="accordion_panel"gt;    lt;Display jsonData = {JsonData} tryData = {customer}/gt;    lt;/Accordion.Panelgt;  lt;/Accordion.Sectiongt;  lt;/Accordiongt;  lt;/Colgt;  lt;/Rowgt;  lt;/Accordion.Panelgt;  lt;/Accordion.Sectiongt;  lt;/Accordiongt;  lt;/Colgt;  lt;/Rowgt;  )  }    export default App;  

Это мое Display.js:

 function withMyHook(Component) {  return function WrappedComponent(props) {  const myHookValue = useZafClient();  return lt;Component {...props} myHookValue={myHookValue} /gt;;  } }  class Display extends React.Component {   constructor(props) {  super(props);   this.state = {  fields: this.props.jsonData.data[0].attributes,  errors: {},  customers: [],  flag: (this.props.jsonData.data[0].attributes.CustomerID === "") ? 'register' : 'view'   };  }   handleChange(field, e) {  let fields = this.state.fields;  fields[field] = e.target.value;  this.setState({ fields });  }   render() {  console.log("trydata");  console.log(this.props.tryData);  return(  lt;divgt;  {Object.keys(this.props.jsonData.data[0].attributes).map((key, i) =gt; (  lt;p key={i}gt;  lt;spangt;{key}  lt;input value={this.state.fields[key] || ''}   placeholder={key}  disabled = {(this.state.flag === 'view') ? "disabled" : "" }  onChange={this.handleChange.bind(this,key)} /gt;lt;/spangt;  lt;/pgt;  ))}   {(this.state.flag === "register") ?   lt;Button onClick={() =gt; this.setState({flag: 'view'})}gt; Register lt;/Buttongt; :  null  }   {(this.state.flag === "view") ?   lt;Button onClick={() =gt; this.setState({flag: 'update'})}gt; Edit lt;/Buttongt; :  null  }   {(this.state.flag === "update") ?   lt;Button onClick={() =gt; this.setState({flag: 'view'})}gt; Submit lt;/Buttongt; :  null  }  lt;/divgt;  )  } };  export default withMyHook(Display);  

Как вы можете видеть.. вызов API на моем App.js проходит tryData = {customer} , моя проблема в том, что данные не будут переданы Display.js, не раньше, чем я открою Accordion Customer Information … вы можете видеть на display.js который я использую this.props.jsonData.data[0].attributes вместо this.props.tryData.attributes , потому что я получаю ошибку типа Ошибка реквизита

Ответ №1:

Попробуйте поместить переменные внутри компонента приложения, которые вы передаете в качестве значения реквизита

 const App =()=gt; {  let client=null,  .... }