如何以当前状态进行推送

Question

I am creating an application with tabs. These tabs are created by clicking on a menu item. My problem is that repeated tabs are created. If you have already clicked on a menu item, I need you to do nothing (do not add it to my array). console.log (newArrayTabs) works perfectly and does not add elements to my array, but I do not know how to use it in the push . If in the push I try to use newArrayTabs it does not work.

I edit my code with @FunkeyFlo and i changed some code. This is the correct code for fix my issue .

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>
        )}
        </>
    )
}

Answer 1

Your example is a bit confusing as tabs and tabsLi seem to be provided to the state as well as tabsLi being contained in tabs(?)

But to update an array in your state you could do the following instead

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

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

EDIT: it also works fine with components

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'));