मेरे पास एक नेस्टेड सरणी वाला राज्य है जो निम्न जैसा दिखता है:

{
    list: [
        {
        id: '3546f44b-457e-4f87-95f6-c6717830294b',
        title: 'First Nest',
        key: '0',
        children: [
            {
            id: '71f034ea-478b-4f33-9dad-3685dab09171',
            title: 'Second Nest',
            key: '0-0
            children: [
                {
                id: '11d338c6-f222-4701-98d0-3e3572009d8f',
                title: 'Q. Third Nest',
                key: '0-0-0',
                }
            ],
            }
        ],
    ],
    selectedItemKey: '0'
}

जहां नेस्टेड सरणी का लक्ष्य एक पेड़ की नकल करना है और चयनित इटैमकी/कुंजी यह है कि पेड़ नोड को जल्दी से कैसे एक्सेस किया जाए।

मैंने निम्नलिखित तर्क के साथ नेस्टेड आइटम के शीर्षक को अद्यतन करने के लिए कोड लिखा था:

let list = [...state.list];
let keyArr = state.selectedItemKey.split('-');
let idx = keyArr.shift();
let currItemArr = list;

while (keyArr.length > 0) {
  currItemArr = currItemArr[idx].children;
  idx = keyArr.shift();
}

currItemArr[idx] = {
  ...currItemArr[idx],
  title: action.payload
};

return {
  ...state,
  list
};

चीजें पहले नेस्टेड आइटम के लिए ठीक से काम करती हैं, लेकिन दूसरे और तीसरे स्तर के घोंसले के लिए, मुझे निम्नलिखित इमर कंसोल त्रुटियां मिलती हैं

An immer producer returned a new value *and* modified its draft.
Either return a new value *or* modify the draft.

मुझे लगता है कि मैं अपने नेस्टेड ऐरे एक्सेस/अपडेट लॉजिक के संबंध में यहां कुछ बहुत बड़ा गड़बड़ कर रहा हूं, या जिस तरह से मैं State.list की एक नई प्रतिलिपि बनाने और उसे संशोधित करने का प्रयास कर रहा हूं। कृपया ध्यान दें कि नेस्टेड स्तर गतिशील है, और मुझे इसे संशोधित करने से पहले इसकी गहराई का पता नहीं है।

फिर से अग्रिम धन्यवाद!

1
LeoVannini 31 मार्च 2021, 23:19
1
आपको list संपत्ति को संशोधित करना चाहिए और कुछ भी वापस नहीं करना चाहिए। इमर आपको राज्य को संशोधित करने या एक नया राज्य वापस करने की अनुमति देता है लेकिन दोनों एक साथ नहीं।
 – 
Linda Paiste
31 मार्च 2021, 23:27
समझा! जवाब देने के लिए बहुत - बहुत धन्यवाद!
 – 
LeoVannini
31 मार्च 2021, 23:31
मैं आपके लिए एक उत्तर लिख रहा हूँ :) यदि कोई उत्परिवर्तन नहीं है तो आप एक नया राज्य वापस कर सकते हैं लेकिन वास्तव में यहाँ एक उत्परिवर्तन है।
 – 
Linda Paiste
31 मार्च 2021, 23:32

1 उत्तर

सबसे बढ़िया उत्तर

इमर आपको मौजूदा ड्राफ़्ट state या return को एक नया राज्य संशोधित करने की अनुमति देता है, लेकिन दोनों एक साथ नहीं।

ऐसा लगता है कि आप एक नया राज्य वापस करने की कोशिश कर रहे हैं, जो तब तक ठीक है जब तक कोई उत्परिवर्तन न हो। हालाँकि जब आप currItemArr[idx] = असाइन करते हैं तो आप एक संशोधन करते हैं। यह एक उत्परिवर्तन है क्योंकि list और currItemArr के तत्व वही तत्व हैं जो state.list में हैं। यह एक "उथली प्रति" है।

लेकिन आपको उथली प्रतियों और उत्परिवर्तनों के बारे में चिंता करने की आवश्यकता नहीं है क्योंकि आसान तरीका केवल मसौदा स्थिति को संशोधित करना है और कुछ भी वापस नहीं करना है।

आपको बस सही वस्तु खोजने और उसकी title संपत्ति सेट करने की आवश्यकता है। मैं array.reduce() का उपयोग करके ऐसा करने का एक छोटा तरीका लेकर आया हूं।

const keyArr = state.selectedItemKey.split("-");

const target = keyArr.reduce(
  (accumulator, idx) => accumulator.children[idx],
  { children: state.list }
);

target.title = action.payload;
2
Linda Paiste 31 मार्च 2021, 23:47
1
और भी बेहतर! मेरे मुद्दे के बारे में स्पष्टता के लिए और एक और भी सरल समाधान साझा करने के लिए धन्यवाद! बहुत धन्यवाद, लिंडा!
 – 
LeoVannini
1 अप्रैल 2021, 00:00