React中setState未更新渲染的商品目录问题排查

核心问题 #

你遇到的两个问题本质都是React状态更新的规范问题，具体错误点如下：

• 状态更新时没有创建新的数组引用，let newSelected = menuFilters属于引用赋值，两个变量指向同一个数组，你修改数组内对象属性属于原地修改原state，React做浅比较时发现引用地址没有变化，就会跳过重渲染，所以商品列表不会更新
• Checkbox组件使用了非受控的defaultChecked属性，没有和你的state做绑定，勾选状态不会同步state的变化
• 渲染菜单时传入的是初始静态的filters数组，而非state中存储的menuFilters，就算state更新菜单也不会同步变化

修复代码 #

1. 修正状态更新逻辑 #

完全避免原地修改状态，更新时返回全新的数组和修改后的对象：

function handleChangeMenu(event) {
  const newSelected = menuFilters.map(filter => {
    if (filter.name === event.target.name) {
      // 匹配到对应分类时返回新对象，不修改原对象属性
      return {...filter, selected: event.target.checked}
    }
    return filter
  })
  setMenuFilters(newSelected)
}

2. 修正Checkbox为受控组件 #

修改buildMenuItems方法，将defaultChecked替换为绑定state的checked属性，同时给循环渲染的项补充唯一key值：

function buildMenuItems(items) {
  return (
    items.map(value =>
      <FormControlLabel control={<Checkbox checked={value.selected} />}
                        name={value.name}
                        onChange={event => handleChangeMenu(event)}
                        label={value.name}
                        key={value.name} />
    )
  )
}

3. 修正菜单渲染数据源 #

修改return部分的菜单渲染调用，传入state中的menuFilters而非初始静态值：

<FormGroup>
  {buildMenuItems(menuFilters)}
</FormGroup>

额外提示 #

你代码中商品的分类字段拼写为catagory，标准拼写为category，如果后续有对接其他接口的需求可以统一修正，不影响当前功能运行。

内容的提问来源于stack exchange，提问作者engineer-x