Как обновить переменную map () внутри компонента React, onclick? - PullRequest
Новая
       10

Как обновить переменную map () внутри компонента React, onclick?

0 голосов
/ 02 августа 2020

Каков правильный способ повторно отобразить переменную map() без перезагрузки страницы? В моем приложении React кнопка в другом компоненте Y должна запускать map const в компоненте X снова и снова, потому что некоторые из ее объектов и массивов постоянно меняются.

X.jsx 

import React, {component} from 'react';
class X extends Component {
   render () {
     return (
          <button>
             reload
          </button>
         )
    }
}

Y.jsx 

import React, {component} from 'react';
import myjson from './myjson.json';
const myMap = myjson.all.map((all)=>
   <li>
      {all.title}
   </li>
);

class Y extends Component {
   render () {
        return (
           <div>
             {myMap}
           </div>
           )
       }
}

my json. json

{
  "all"[
    {"title": "firsttitle"},
    {"title": "secondtitle"}
   ]
}

1 Ответ

1 голос
/ 02 августа 2020

В основном для повторного рендеринга вам нужно изменить состояние, поэтому реакция автоматически отображает ваш компонент. В приведенном выше коде переместите массив myMap как состояние в компоненте Y и создайте обработчик в Y и передайте его в качестве реквизита в X и прикрепите его к кнопке. 

import React, {component} from 'react';
import X from 'components/X';// your component path here
class Y extends Component {
   constructor(props){
     super(props);
     this.state = {
     "all"[
     {"title": "firsttitle"},
    {"title": "secondtitle"} ]
     } 
   }
  handlerToUpdateState = ()=>{
   this.setState({...update here.....})
  }
   render () {
        return (
           <div>
             {myMap}
           <X handler={this.handlerToUpdateState}/>
           </div>
           )
   }
}
...