react cw

js/22_react_cw/elements/src/App.js

@@ -299,14 +299,20 @@ const MySelect = ({options=countries, value='ZW', onChange}) => (
 
 
 
-const PhoneBookEntry = ({data={name:'',phone:''}, index,    onChange, 
+const PhoneBookEntry = ({data={name:'',phone:''}, /* index,  */   onChange, 
                                                             onMoveUp, 
                                                             onMoveDown, 
                                                             onDelete, 
                                                             onAdd}) => (
     <div>        
-        <input type="text" value={data.name} onChange={(e) => onChange({name: e.target.value, phone: data.phone}, index)} />
-        <input type="number" value={data.phone} onChange={(e) => onChange({name: data.name, phone: e.target.value}, index)} />
+        <input type="text" value={data.name} /* onChange={(e) => 
+                    onChange({name: e.target.value, phone: data.phone}, index)} */ 
+            onChange={(e) => 
+                    onChange({name: e.target.value, phone: data.phone})}/>
+        <input type="number" value={data.phone} /* onChange={(e) => 
+                    onChange({name: data.name, phone: e.target.value}, index)}  */
+            onChange={(e) => 
+                    onChange({name: e.target.value, phone: data.phone})}/>
         <button onClick={onMoveUp}>^</button>
         <button onClick={onMoveDown}>v</button>
         <button onClick={onDelete}>x</button>
@@ -314,18 +320,32 @@ const PhoneBookEntry = ({data={name:'',phone:''}, index,    onChange,
     </div>
 )
 
-const defaultPeople =  [{name: 'Vasya', phone: '101'}, {name: 'Jhon', phone: '102'}, {name: 'Paul', phone: '103'}]
+const defaultPeople =  [
+            {name: 'Vasya', phone: '101'}, 
+            {name: 'Jhon', phone: '102'}, 
+            {name: 'Paul', phone: '103'}]
 
 const PhoneBook = ({people=defaultPeople, onSave}) => {
     const [ppl, setPpl] = useState(people)
     const [keys, setKeys] = useState(people.map(() => Math.random()))
-    //const {current: keys}  = useRef(people.map(() => Math.random()))
+    //const keys  = useRef(people.map(() => Math.random()))
+    // keys.current - read; keys.curernt = ... - write
+    // ref не перезапускает функцию в отличте от стейта
 
     useEffect(() => {
         setPpl(people)
         setKeys(people.map(() => Math.random()))
     }, [people])
 
+    useEffect(() => {
+        // ppl => всегда, когда стейт зависит от предыдущего
+        setTimeout(() => {  
+                            setPpl(ppl => [{name:'123123123',phone:'1121231'}, ...ppl])
+                            setKeys(keys => [Math.random(), ...keys]) 
+                            // keys.current = [Math.random(), ...keys.current]
+    }, 3000)
+    }, [])
+
     const onChange = (newData, i) => {
         ppl[i] = newData
         setPpl([...ppl])
@@ -334,6 +354,7 @@ const PhoneBook = ({people=defaultPeople, onSave}) => {
         if (i > 0) {
             [ppl[i-1], ppl[i]] = [ppl[i], ppl[i-1]];
             [keys[i-1], keys[i]] = [keys[i], keys[i-1]]
+            // [keys.current[i-1], keys.current[i]] = [keys.current[i], keys.current[i-1]]
         }     
         setPpl([...ppl])
         setKeys([...keys])
@@ -342,6 +363,7 @@ const PhoneBook = ({people=defaultPeople, onSave}) => {
         if (i < ppl.length - 1) {
             [ppl[i], ppl[i+1]] = [ppl[i+1], ppl[i]];
             [keys[i], keys[i+1]] = [keys[i+1], keys[i]]
+            // [keys.current[i], keys.current[i+1]] = [keys.current[i+1], keys.current[i]]
         }
         setPpl([...ppl])
         setKeys([...keys])
@@ -349,22 +371,28 @@ const PhoneBook = ({people=defaultPeople, onSave}) => {
     const onDelete = (i) => {
         setPpl(ppl.filter((el, index) => index !== i)) 
         setKeys(keys.filter((el, index) => index !== i)) 
+        // keys.current.filter((el, index) => index !== i)
     }
     const onAdd = (i) => {
         ppl.splice(i+1, 0, {name:'',phone:''})
         keys.splice(i+1, 0, Math.random())
         setPpl([...ppl])
         setKeys([...keys])
+        // keys.current.splice(i+1, 0, Math.random())
     }
+    //console.log(ppl)
     return (
         <>
             <button onClick={() => {    setPpl([{name:'',phone:''}, ...ppl])
                                         setKeys([Math.random(), ...keys])   
+                                        // keys.current = [Math.random(), ...keys.current]
                                     } }>+</button>
             <div className='PhoneBook'>
                 {ppl.map((data, i) => (
-                    <PhoneBookEntry data={data} index={i}
-                        onChange={onChange}
+                    // с помощью key реакт понимает разницу между элементами
+                    <PhoneBookEntry data={data} /* index={i} */ key={keys[i]}
+                       /*  onChange={onChange} */
+                        onChange={(data) => onChange(data, i)}
                         onMoveUp={() => onMoveUp(i)}
                         onMoveDown={() => onMoveDown(i)}
                         onDelete={() => onDelete(i)}