Как сделать push с текущим состоянием - PullRequest
Новая
       14

Как сделать push с текущим состоянием

1 голос
/ 20 июня 2019

Я создаю приложение с вкладками.Эти вкладки создаются путем нажатия на пункт меню.Моя проблема в том, что создаются повторяющиеся вкладки.Если вы уже нажали на пункт меню, мне нужно, чтобы вы ничего не делали (не добавляйте его в мой массив).console.log (newArrayTabs) отлично работает и не добавляет элементы в мой массив, но я не знаю, как использовать его в push.Если в push я пытаюсь использовать newArrayTabs, это не работает.

Я редактирую свой код с помощью @FunkeyFlo, и я изменил некоторый код.Это правильный код для решения моей проблемы .

class App extends Component {
    constructor(props, context){
        super(props, context);

        ["openTabs",].forEach((method) => {
            this[method] = this[method].bind(this);
        });

        this.state = {
            navigation: {
                menu: [],
            },
            tabs:{
                tabsLi:[],    
            },

            textvalue : "",
            showtabs: true,
        }
    }

    componentDidMount() {
        fetch('json_menuFIN.php')
            .then(response => response.json())
            .then(data =>{
                this.setState({navigation: data});
                //console.log(data)
            })
    }

    openTabs(e, url, iframe, trdtitle){
        e.preventDefault();
                const { tabs } = this.state;
        this.setState({
            showtabs: false,
        })
        if (this.state.tabs.tabsLi.includes(trdtitle) === false){
            this.setState({
                tabs: { tabsLi:[...new Set(this.state.tabs.tabsLi),trdtitle]},
            })
        }
    }

class Tabs extends Component {
    render(){
        return(
            <div id="content-tabs" className="tabs">
            {( this.props.showtabs)  
                ? (
                    <>
                    <div className="waiting-leads">
                        <p>Parece que todavía no hay ningún lead...</p>
                        <h3>¡Ánimo, ya llega!</h3>
                        <img src={imgDinosaurio} alt="Dinosaurio"></img>
                    </div>
                    </>
                ) : (
                    <ul id="resizable" className="content" >
                        <List list={this.props.tabs.tabsLi} />
                    </ul>
            )}
            </div>
        );
    }
}

const List = (props) => {
    return (
        <>
        {props.list.map((value, index) =>         
            <li key={index}>
                <span>{value}</span>
                <Icon icon="cerrar" className='ico-cerrar' /*onClick={remove_tab(index)}*//>
            </li>
        )}
        </>
    )
}

1 Ответ

0 голосов
/ 20 июня 2019

Ваш пример немного сбивает с толку, так как вкладки и tabsLi, кажется, предоставляются состоянию, а также tabsLi, содержащиеся в tabs (?)

Но чтобы обновить массив в вашем состоянии, вы можете сделать следующеевместо 

  openTabs(e, url, iframe, trdtitle) {
    e.preventDefault();

    const { tabs } = this.state;
    this.setState({
      //...
      tabsLi: [...tabs.tabsLi, trdtitle], //instead of push
      //...
    })
  }

РЕДАКТИРОВАТЬ: он также отлично работает с компонентами 

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React',
      listObj: { list: ['first value'] }
    };
  }

  onClick = () => {
    const newValue = 'new value';

    const { listObj } = this.state;
    this.setState({
      //...
      listObj: { list: [...listObj.list, newValue] }, //instead of push
      //...
    })
  }

  render() {
    return (
      <div onClick={this.onClick}>
        <List list={this.state.listObj.list} />
      </div>
    );
  }
}

const List = (props) => {
  return <div>{props.list.map((i) => <div>{i}</div>)}</div>
}

render(<App />, document.getElementById('root'));
...