javascript - 删除在setState中的三元中不起作用

Question

所以我一直在努力让应用程序的这一部分 100% 工作，从这些相关问题中可以看出:

Method renders correctly when triggered one at a time, but not using _.map in React-Redux container

Object passed into Redux store is not reflecting all key/values after mapStateToProps

所以设置是这样的......一堆按钮是根据特定项目的数据“削减”数量动态生成的(基本上是不同的查看数据的方式，如地理、业务部门等)。用户可以一次选择一个按钮，单击一个全选。这将从服务器检索与剪辑相关的数据，并在按钮下方生成一个表格。

一次一个选择有效，全选有效，清除所有有效。但是，我现在尝试设置的是，如果此人再次单击同一个按钮，它会关闭该数据点。

这是我在之前的一个问题之后离开的地方:

onCutSelect(cut) {
    this.setState(
        ({cuts: prevCuts}) => ({cuts: {...prevCuts, [cut]: cut}}),
        () => this.props.bqResults(this.state.cuts)
    );
}

适用于一次一个选择和全选(此函数通过来自不同函数的 map 调用)。

对此进行了修改，我希望这会关闭数据点:

onCutSelect(cut) {
    this.setState(
        ({cuts: prevCuts}) => (
            this.state.cuts.hasOwnProperty(cut) 
            ? 
                delete this.state.cuts[cut] 
            : 
                {cuts: {...prevCuts, [cut]: cut}}),
        () => this.props.bqResults(this.state.cuts)
    );

我认为应该发生的事情是检查 key 是否存在以及是否要删除它，这将关闭按钮。确实如此，它将按钮状态更改为未选中。

但是，我认为也应该发生的事情是，由于 this.state.cuts 正在被修改，它会将新的 this.state 发送到 this.props.bqResults Action 。当按钮关闭时，它仍然显示与剪辑相关的数据，因此无论出于何种原因，商店都不会更新。我该如何处理？

下面是相关代码的剩余部分:

---

// results.js actions
export function bqResults(results) {
    console.log(results); // shows all of the selected cuts here
    return function(dispatch) {
        dispatch({
            type: FILTER_RESULTS,
            payload: results
        })
    }
}

---

// results.js reducer
import {
    FILTER_RESULTS
} from '../actions/results';

export default function(state = {}, action) {
    switch(action.type) {
        case FILTER_RESULTS:
            console.log(action.payload); //prints out all the cuts
            return {
                ...state,
                filter_results: action.payload
            }
        default:
            return state;
    }

    return state;
}

const rootReducer = combineReducers({
    results: resultsReducer,
});

export default rootReducer;

Answer 1

onCutSelect(cut) {
  this.setState(
      ({cuts: prevCuts}) => {
        if (cuts.hasOwnProperty(cut)) {
          const newCut = {...this.state.cuts}
          delete newCut[cut]
          return newCut
        } else {
          return {cuts: {...prevCuts, [cut]: cut}}
        }
      },
    () => this.props.bqResults(this.state.cuts)
  );
}

一些事情。首先，不要像那样直接改变状态。使用 delete 删除现有 this.state.cuts 的索引号。以在分配新值时创建全新数组的方式执行此操作。我为此使用了传播运算符。

此外，当您返回删除操作时，它不会返回使用 delete 后数组的内容。它返回 delete 的返回值，在本例中是一个 bool 值。

function delIdx(arr, idx) {
  return delete arr[idx]
 }
 
 console.log(delIdx([1,3,4], 3))