React中Checkbox切换不触发列表重渲染，仅输入框可触发问题求助

核心问题 #

你的代码用全局变量dataFiltered和dataStock存储过滤后的数据，但React组件只会在自身state或props变化时重新渲染。勾选Checkbox时，你仅修改了全局变量，没有触发List组件的状态更新，所以列表不会立刻变化；只有输入框触发父组件setState时，组件重新渲染才会读取全局变量的新值。

另外，Full组件虽然接收了搜索和库存筛选状态，但没有把最终过滤后的数据传递给List，反而让List直接依赖全局变量，违背了React单向数据流原则。

修复步骤 #

1. 移除全局变量：删掉let dataFiltered = data;和let dataStock = data;，所有数据状态由组件内部管理。
2. 集中状态管理：把搜索关键词、库存筛选状态，以及最终过滤后的数据放在Full组件的state里。
3. 实时计算过滤结果：在Full组件中，根据当前搜索和库存状态，实时计算展示数据，再传递给List组件。
4. 组件改为纯展示型：List、Category、Item组件不再依赖全局变量，仅通过props接收数据并渲染。

修正后的完整代码 #

const data = [
    {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
    {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
    {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
    {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
    {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
    {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

class Item extends React.Component {
    checkStock() {
        return this.props.stocked ? {} : {color: 'red'};
    }

    render() {
        return (
            <tr style={this.checkStock()}>
                <td>{this.props.name}</td>
                <td>{this.props.price}</td>
            </tr>
        );
    }
}

class Category extends React.Component {
    render() {
        const items = this.props.items.map((item, index) => (
            <Item key={index} {...item} />
        ));
        return (
            <React.Fragment>
                <tr><b>{this.props.category}</b></tr>
                {items}
            </React.Fragment>
        );
    }
}

class List extends React.Component {
    render() {
        // 按分类分组数据
        const groupedData = this.props.data.reduce((acc, item) => {
            if (!acc[item.category]) {
                acc[item.category] = [];
            }
            acc[item.category].push(item);
            return acc;
        }, {});

        const categories = Object.entries(groupedData).map(([category, items], index) => (
            <Category key={index} category={category} items={items} />
        ));

        return (
            <table>
                <tr>
                    <th>Nom</th>
                    <th>Prix</th>
                </tr>
                {categories}
            </table>
        );
    }
}

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {search: '', stock: false};
        this.handleSearch = this.handleSearch.bind(this);
        this.handleCheck = this.handleCheck.bind(this);
    }

    handleSearch(e) {
        const search = e.target.value;
        this.setState({search}, () => {
            this.props.onFilterChange({search, stock: this.state.stock});
        });
    }

    handleCheck(e) {
        const stock = e.target.checked;
        this.setState({stock}, () => {
            this.props.onFilterChange({search: this.state.search, stock});
        });
    }

    render() {
        return (
            <div>
                <form>
                    <input
                        type="text"
                        id="searchBar"
                        name="searchBar"
                        placeholder="Chercher un article"
                        value={this.state.search}
                        onChange={this.handleSearch}
                    />
                    <br />
                    <input
                        type="checkbox"
                        id="stockCheck"
                        name="stockCheck"
                        checked={this.state.stock}
                        onChange={this.handleCheck}
                    />
                    <label htmlFor="stockCheck">Afficher uniquement les produits en stock</label>
                </form>
            </div>
        );
    }
}

class Full extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            search: '',
            stock: false,
            filteredData: data
        };
        this.handleFilterChange = this.handleFilterChange.bind(this);
    }

    handleFilterChange({search, stock}) {
        let filtered = [...data];
        // 库存筛选
        if (stock) {
            filtered = filtered.filter(item => item.stocked);
        }
        // 搜索筛选
        if (search) {
            const lowerSearch = search.toLowerCase();
            filtered = filtered.filter(item => item.name.toLowerCase().startsWith(lowerSearch));
        }
        this.setState({search, stock, filteredData: filtered});
    }

    render() {
        return (
            <div>
                <Form onFilterChange={this.handleFilterChange} />
                <List data={this.state.filteredData} />
            </div>
        );
    }
}

class App extends React.Component {
    render() {
        return <div><Full /></div>;
    }
}

ReactDOM.render(<App />, document.querySelector('#app'));

关键修改说明 #

• Form组件：不再直接修改全局变量，通过onFilterChange回调把筛选条件传递给父组件Full。
• Full组件：接收筛选条件，实时计算过滤后的数据并存入state，再通过props传给List。
• List/Category/Item：完全变为纯展示组件，仅接收props数据渲染，符合React组件设计原则。
• 修复Checkbox的checked属性绑定，之前用value是错误的，应该用checked控制选中状态。

内容的提问来源于stack exchange，提问作者Uxenora