如何使用当前状态进行推送

Question

我正在创建一个带有标签的应用程序。这些选项卡是通过单击菜单项创建的。 我的问题是创建了重复的选项卡。如果您已经单击了一个菜单项，我需要您什么都不做（不要将它添加到我的数组中）。 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>
        )}
        </>
    )
}

Answer 1

您的示例有点令人困惑，因为 tabs 和 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'));