Question

我正在尝试更新嵌套状态。见下文。问题在于，单击类别复选框后，而不是更新状态下的{categories：....}对象，而是创建了状态下的新对象

class AppBC extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      products: [],
      categories: []
    }
    this.handleSelectCategory = this.handleSelectCategory.bind(this);
  }

  componentDidMount() {
    this.setState({
      products: data_products,
      categories: data_categories.map(category => ({
        ...category,
        selected: true
      }))
    });
  }

  handleSelectCategory(id) {
    this.setState(prevState => ({
      ...prevState.categories.map(
        category => {
          if(category.id === id){
            return {
              ...category,
              selected: !category.selected,
            }
          }else{
            return category;
          } // else
          } // category
          ) // map
        }) // prevState function
    ) // setState
  } // handleSelectCategory


  render() {
    return(
      <div className="bc">
        <h1>Bare Class Component</h1>
        <div className="main-area">
          <Products categories={this.state.categories} products={this.state.products} />
          <Categories 
            categories={this.state.categories}
            handleSelectCategory={this.handleSelectCategory}
          />
        </div>
      </div>
    );
  };

单击之前的初始状态（已选择所有类别）：

单击复选框以选择特定类别后，它将保存一个要声明的新对象（正确反映类别选择），而不是更新已经存在的类别属性：

Answer 1

将更新更改为：

handleSelectCategory(id) {
    this.setState(prevState => ({
            ...prevState,
            categories: prevstate.categories.map(
                category => {
                    if (category.id === id) {
                        return {
                            ...category,
                            selected: !category.selected,
                        }
                    } else {
                        return category;
                    } // else
                } // category
            ) // map
        }) // prevState function
    ) // setState
}

Answer 2

我更喜欢这种方式，它更易于阅读

handleSelectCategory(id) {
    const index = this.state.categories.findIndex(c => c.id === id);
    const categories = [...this.state.categories];
    categories[index].selected = !categories[index].selected;
    this.setState({ categories });
}

Answer 3

如果您的目的是仅更改selected函数上的handleSelectCategory属性，

那你就可以做到

在数组上运行findIndex，并从对象数组中获得index匹配的id。
更新该index的选定属性

代码：

handleSelectCategory(id) {
  let targetIndex = this.state.categories.findIndex((i) => i.id === id);
  let updatedCategories = [...this.state.categories];
  if (targetIndex !== -1) {
    // this means there is a match
    updatedCategories[targetIndex].selected = !updatedCategories[targetIndex].selected;
    this.setState({
      categories: updatedCategories,
    });
  } else {
    // avoid any operation here if there is no "id" matched
  }
}

React-更新嵌套状态（类组件）

3 个答案: