ReactJS Переключение между состояниями массива [хуков] - PullRequest
Новая
       7

ReactJS Переключение между состояниями массива [хуков]

0 голосов
/ 06 мая 2020

Всем привет, не могли бы вы помочь мне, пожалуйста, с моей проблемой?

Итак, у меня есть флажок и массив ob js, полученный из запроса API: 

const ownRequest= [
{status: "pending", type: "aaa"},
{status: "pending", type: "bbb"},
{status: "pending", type: "bbb"},
{status: "pending", type: "aaa"},
{status: "pending", type: "aaa"}
]


export const Types= () => {
  const [checked, setChecked] = useState(true);
  const [ownRequest, setOwnRequest] = useState([]);

  useEffect(() => {
    let ignore = false;

    async function fetchData() {
      const result = await fetchTimeoffRequests();
      if (!ignore) {
        setOwnRequest(result);
      }
    }

    fetchData();
    return () => {
      ignore = true;
    };
  }, []);

  const req = checked ? ownRequest: ownRequest.filter(i=>i.type==="aaa")
  setOwnRequest(req);

  const handleCheck = (event) => {
    setChecked(!checked);
  }
}
return (
    <div className={classes.root}>
     <Checkbox onChange={(e) => handleCheck(e)} checked={checked} />
    </div>
}

Я хотел бы отображать такие элементы: если отмечен, показать мне все элементы, если не только элементы с типом: «aaa» , а также иметь возможность вернуться в исходное состояние (как переключатель)

Я что-то сделал, но не могу понять, как с этим справиться дальше

1 Ответ

0 голосов
/ 06 мая 2020

Я думаю, вы могли бы его усложнить: 

const [checked, setChecked] = React.useState(false);
const req = [
    {status: "pending", type: "aaa"},
    {status: "pending", type: "bbb"},
    {status: "pending", type: "bbb"},
    {status: "pending", type: "aaa"},
    {status: "pending", type: "aaa"}
]

//Simple filter depending on the checked state with a ternary if
const ownRequest= checked ? req : req.filter(i=>i.type==="aaa")

const handleCheck = (event) => {
     setChecked(!checked);
}

<Checkbox onChange={(e) => handleCheck(e)} checked={checked} />

Что касается обновленного вопроса:

Бесконечное l oop происходит от setOwnRequest(req);. Это потому, что setOwnRequest() вызывает повторный рендеринг каждый раз, когда изменяется.

...