React state/child 更新未按预期运行

Question

我的 React 应用程序内部有两个组件

导航栏

import React, { Component } from 'react';
import NavLink from './navlink';

class Navbar extends Component {
    state = {
        links: [
            {
                title: "Music",
                active: false
            },
            {
                title: "Home",
                active: false
            },
            {
                title: "Discord",
                active: false
            }
        ]
    }

    updateNavlinks = title => {
        const links = this.state.links
        for (const link in links){
            if (links[link].title != title){
                links[link].active=false;
            }
            else{
                links[link].active=true;
            }
        }
        console.log(links);
        this.setState({links})
    };

    render() { 
        return (
            <div id="Navbar">
                {this.state.links.map(link => <NavLink key={link.title} title={link.title} active={link.active} onClickFunc={this.updateNavlinks}/>) }
            </div>
        );
    }
}
 
export default Navbar;

导航链接

import React, { Component } from 'react';

class NavLink extends Component {
    state = {
        className: "navlink"+ (this.props.active?" active":"")
    }
    render() {
        return (
            <div className={this.state.className} onClick={() => this.props.onClickFunc(this.props.title)}>
                {this.props.title}
            </div>
        );
    }
}
 
export default NavLink;

我的目的是创建一个导航栏，如果用户选择一个页面，<Navlink /> 的状态就会改变。一旦它的状态改变 (active=true)，我希望 classname 改变，添加“active”class 并赋予它我想要的样式。

调用 updateNavlinks() 时，<Navbar /> 中的状态发生变化，但不会导致关联的 <Navlink />

中的视觉变化

我哪里做错了？有没有更简单的方法来完成这个？

Answer 1

在这里，您正在改变现有状态：

updateNavlinks = title => {
    const links = this.state.links
    for (const link in links){
        if (links[link].title != title){
            links[link].active=false;
        }
        else{
            links[link].active=true;
        }
    }
    console.log(links);
    this.setState({links})
};

切勿在 React 中改变状态 - 这会使脚本行为不可预测。您需要使用 new 对象来调用 setState，因此 React 知道 re-render:

updateNavlinks = titleToMakeActive => {
    this.setState({
        links: this.state.links.map(
            ({ title, active }) => ({ title, active: title === titleToMakeActive })
        )
    });
};

另一个问题是您在 NavLink:

中的子组件的构造函数中分配状态

class NavLink extends Component {
    state = {
        className: "navlink"+ (this.props.active?" active":"")
    }
    render() {
        return (
            <div className={this.state.className} onClick={() => this.props.onClickFunc(this.props.title)}>
                {this.props.title}
            </div>
        );
    }
}

组件挂载时赋值给stateown-property，但组件没有获取un-mounted；实例不会改变，所以 state 不会被再次分配，即使 props 改变了。

要修复它，请参考 render 中的道具而不是使用状态：

class NavLink extends Component {
    render() {
        return (
            <div className={"navlink"+ (this.props.active?" active":"")} onClick={() => this.props.onClickFunc(this.props.title)}>
                {this.props.title}
            </div>
        );
    }
}

React state/child 更新未按预期运行

React state/child update not behaving as I expected it to

javascript

reactjs

create-react-app

导航栏

导航链接