отреагировать на изменение рендеринга массива из useReducer - PullRequest
Новая
       9

отреагировать на изменение рендеринга массива из useReducer

0 голосов
/ 26 сентября 2019

У меня есть два массива объектов, которые разделены из большего массива по ключу found.Это логическое значение. 

const Names = //the main array, that I split the others off of.
  [{name:'Paul','age':33,'found':true},
  {name:'Michelle','age':32,'found':true},
  {name:'Erik','age':30,'found':true},
  {'name':'Ruth','age':69,'found':false},
  {'name':'patty','age':59,'found':false},
  {'name':'Steve','age':60,'found':false},
  {'name':'mike','age':73,'found':true}]
//split the main array into smaller arrays based on the key 'found'
useEffect(()=>{
        console.log('this')
     Names.map((people,index)=>{
        if(people['found']){
            one.push({people,index});
        } else {
            two.push({people,index});
        }
     })
     setOneLst(one);
     setTwoLst(two);
    },[])

Эти массивы затем отображаются как элементы списка с флажком.Когда пользователь нажимает на флажок, я обновляю значение ключа found, чтобы оно было противоположным тому, что было.В следующем коде я также меняю имя.Мне это не нужно, я просто использую его в качестве теста. 

const NameChange = (state,action)=>{
        switch(action.type){
            case 'FOUND':
            console.log(action.index)
            return state.map((people,index)=>{
                if(index===action.index){
                     people['found']=!people['found']
                    people['name']='test';
                    return people
                } else { 
                    return people
                }
            })
            default: return state;
        }
     }

Пока все это работает.Однако проблема, с которой я сталкиваюсь, заключается в том, что когда пользователь нажимает на флажок и он обновляется, я также хотел бы, чтобы соответствующие массивы также изменились.Например: если пользователь щелкнет по полю, соответствующему Paul, он изменит значение name на test и значение found false.Это он в настоящее время делает.Тем не менее, я бы тогда хотел показать его в массиве two, потому что это found:false.

это весь код: 

import React, {useState,useEffect,useReducer} from 'react';   
 const one=[];
 const two=[];
 const Names = [{name:'Paul','age':33,'found':true},
  {name:'Michelle','age':32,'found':true},
  {name:'Erik','age':30,'found':true},
  {'name':'ruth','age':69,'found':false},
  {'name':'patty','age':59,'found':false},
  {'name':'steve','age':60,'found':false},
  {'name':'mike','age':73,'found':true}]
  const NameChange = (state,action)=>{
        switch(action.type){
            case 'FOUND':
            console.log(action.index)
            return state.map((people,index)=>{
                if(index===action.index){
                     people['found']=!people['found']
                    people['name']='test';
                    return people
                } else { 
                    return people
                }
            })
            default: return state;
        }
     }
 const App=()=>{
    const [peoples, dispatch] = useReducer(NameChange, Names);
    const handleFind = idx =>{
        dispatch({type:'FOUND',index:idx})
    };   
     //const [nameLst, setnameLst] = useState(Names);
     const [oneLst, setOneLst] = useState([]);
     const [twoLst, setTwoLst] = useState([]);
     useEffect(()=>{
        console.log('this')
     Names.map((people,index)=>{
        if(people['found']){
            one.push({people,index});
        } else {
            two.push({people,index});
        }
     })
     setOneLst(one);
     setTwoLst(two);
    },[])
    console.log(one);
    return(
        <div className="App">
        <h1>Hello World</h1>
        <p>Lets make some magic:</p>
            {
                one.map((people,index)=>(
                    <li key={index}><input type="checkBox" checked={people['people']['found']} onChange={()=>handleFind(people['index'])}/>{people['people']['name']}</li>
                ))
            }
        <div><h1>List 2:</h1></div>
            {   
                two.map((people,index)=>(
                    <li key={index}><input type="checkBox" checked={people['people']['found']} onChange={()=>handleFind(people['index'])}/>{people['people']['name']}</li>
                ))
            }
        </div>
    )
 };
 export default App;
...