Question

当您单击导航菜单中的项目时，我正在创建一个可创建Tabs的组件。我在父亲中所做的所有控制，以便能够顺利通过兄弟之间的州。因为现在是我的代码，所以在单击菜单项时会创建一个唯一的<li>并显示名称。如果单击整个菜单项，则不会创建新的<li>，而是使用新菜单信息更新旧菜单项。我每次按下菜单项时都需要一个新的<li>及其内容。

我使用@ technogeek1995的更改来编辑代码，这是最终的解决方案：

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_menu.php')
            .then(response => response.json())
            .then(data =>{
                this.setState({navigation: data});
                //console.log(data)
            })
    }
    openTabs(e, url, iframe, trdtitle){
        e.preventDefault();
        const state = {...this.state};
        state.textvalue = trdtitle.split();
        state.tabs.tabsLi.push(state.textvalue);
        console.log(state.tabs.tabsLi)
        this.setState({ state });
        this.setState({ 
            showtabs: false,
        }); 
    }

class Tabs extends Component {
    render(){
        const renderTabs = tabs =>{
            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" >
                            {this.props.tabs.tabsLi.map((value, index) => {
                                return (
                                    <li key={index}>
                                        <span>{value}</span>
                                        <Icon icon="cerrar" className='ico-cerrar' onClick={remove_tab(index)}/>
                                    </li>
                                )
                            })}
                        </ul>
                )}
                </div>
            );
        }
        return (
            <>
                {renderTabs(this.props.tabs.tabsLi)}
            </>
            )
    }
}

这是单击菜单项时生成的代码。 <span>是已更新的<li>，没有创建新的<ul id="resizable" class="content"> <li> <span>Ventas</span> <svg class="ico-cerrar">path</svg> </li> </ul>。 Ventas是我的元素菜单名称。

struct Root: Codable {
    let metaData: [String: String]
    let timeSeriesFX5Min: [String:Forex]

    enum CodingKeys: String, CodingKey {
        case timeSeriesFX5Min = "Time Series FX (5min)"
        case metaData = "Meta Data"
    }
}

Answer 1

问题似乎与直接改变状态有关。您应该在控制台/终端中看到一些有关直接更改react状态的警告。我已经更新了您的openTabs函数，使其不再直接改变状态。相反，我将状态复制到局部变量，执行局部状态对象的变异。然后，我使用本地更新的状态对象调用setState。 React将自动获取对状态的更改，并以（新的）更新状态呈现页面。

openTabs(e, url, iframe, trdtitle){
        e.preventDefault();
        const state = {...this.state};
        state.textvalue = trdtitle.split();
        state.navigation.menu.push(state.textvalue);
        state.showtabs = false;
        this.setState({ state });
}

标签组件需要更新以遍历列表，而不是遍历字符串，因此它将为<li>中的每个元素创建一个state.navigation.menu。 remove_tab必须包装在{}中，而不是""中。

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"/>
          </div>
        ) : (
        <ul id = "resizable" className = "content" >
          {this.props.tabs.map((value, index) => (
                <li key={index} >
                  <span>{value}</span>
                  <Icon icon = "cerrar" className = 'ico-cerrar' onClick={remove_tab(index)} / >
                </li>
              )
          } </ul>
        )} </div>
    );
  }
}

Answer 2

您应该使用状态的回调版本，并使用传播语法使用新引用创建新对象，以便React检测状态更改。

this.state.navigation.menu.push(this.state.textvalue) 另外，此行将推送旧的textValue而不推送新的trdtitle.split()

openTabs(e, url, iframe, trdtitle){
        e.preventDefault();
        const textValue = trdtitle.split()
        this.setState(state => ({
            textvalue,
            showtabs: false,
            navigation: { 
                ...state.navigation, 
                menu: [ ...state.navigation.menu, textValue ] 
            }
        })); 
    }

地图仅创建一个li-React

2 个答案: