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行动。当按钮切换为关闭时，它仍然显示与剪切相关的数据，因此存储不会因任何原因而更新。我应该怎么处理这个？

以下是相关代码的其余部分：

// 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

<ul>
    <li>One:
        <div id="digit_1"></div>
    </li>
    <li>Two:
        <div id="digit_2"></div>
    </li>
    <li>Three:
        <div id="digit_3"></div>
    </li>
    <li>Four:
        <div id="digit_4"></div>
    </li>
</ul>

一些事情。首先，不要直接改变状态。使用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

删除不在setState中的三元组中工作

1 个答案: