reactjs - 复选框状态不会根据 redux 状态而改变

Question

我有一个愚蠢的组件，它接收一堆对象并呈现一个复选框。dumb组件看起来像这样:

// imports

const FilterList = ({ filterTitle, filters, onFilterChange }) => {
  console.log(`FILTERS: ${JSON.stringify(filters)}`);
  return (
    <div>
      <Header colorIndex="light-2" size="small">
        <Label margin="none">
          {filterTitle}
        </Label>
      </Header>
      <List>
        <ListItem direction="column" align="start">
          {filters &&
            filters.map(filter => {
              console.log(filter);
              return (
                <CheckBox
                  key={filter.name}
                  label={filter.name}
                  value={filter.name}
                  checked={filter.checked}
                  onChange={onFilterChange}
                />
              );
            })}
        </ListItem>
      </List>
    </div>
  );
};

FilterList.propTypes = {
  .....
};

export default FilterList;

现在，过滤器是一个对象数组，如下所示:

export const find = [
  {
    type: 'find',
    name: 'Apartment',
    searchType: 'text',
    checked: false,
  },
  {
    type: 'find',
    name: 'Assisted Living',
    searchType: 'text',
    checked: false,
  }
];

现在我有一个容器，它可以处理复选框的 onChange 事件并相应地切换其checked 状态。现在，我正确处理了 onChange 事件，因为我看到 checked 属性是 true 或 false 反射(reflect)在应用程序状态正确。

我不明白发生了什么，但是商店中的更改不会反射(reflect)或传播回dumb组件，并且复选框根本不会更改状态。

以下是我的容器、操作和化简器文件的链接:

1) 容器:https://gist.github.com/ghoshabhi/ba0feafdb58535150335f6d847e4f562

2) 操作:https://gist.github.com/ghoshabhi/eadec3dd7701afeaac72fd8afb71b94a

3) reducer :https://gist.github.com/ghoshabhi/7233e7d5143c4b9d8108c5ebb936d60c

---

欢迎提供任何帮助、建议或替代方法。

谢谢!

Answer 1

嗯，你的问题与react或redux无关，而是与纯html有关。如果您包含任何值(包括 false)的checked属性，它将呈现checked。因此，如果您的复选框应重新显示为未选中状态，则必须完全省略选中属性。

参见:this answer for more details