Как добавить весь массив в переменную useState - PullRequest
Новая
       25

Как добавить весь массив в переменную useState

1 голос
/ 09 июня 2019

Я пытаюсь добавить весь массив в переменную useState 

import React, { Fragment, useState, useEffect } from 'react';
import { Form, Button, Popover, OverlayTrigger } from 'react-bootstrap';

const Filter = props => {
  const [formData, setFormData] = useState({
    filter: ''
  });
  const [items, setItems] = useState([]);
  const [retrievedItems, setRetrievedItems] = useState([]);

  const addToFilter = newFilter => {
    let retrievedFilter = ["da vinci","paris", "london"];
    console.log(retrievedFilter);
    if (retrievedFilter.length > 0) {
      setRetrievedItems([...retrievedItems, retrievedFilter]);
      retrievedFilter = 0;
      setRetrievedItems([...retrievedItems, newFilter]);
    } else {
      setItems([...items, newFilter]);
    }
    console.log('items are: ', items);
    console.log('retrieve filter', props.retrievedFilter);
    console.log('retrieved items: ', retrievedItems);
  };

  useEffect(() => {
    console.log('useEffect ', retrievedItems);
  }, [retrievedItems]);

  const deleteFilter = index => {
    // props.retrievedFilter.splice(index, 1);
    items.splice(index, 1);
    setItems([...items]);
    // setItems([...props.retrievedFilter, ...items]);
    console.log(items);
  };

  const { filter } = formData;
  const onChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const onSubmit = e => {
    e.preventDefault();
    addToFilter(filter);
    // Passing filter data up (i.e: to components that use <Filter />)
    props.filterData(filter);
    //Close the Popover
    document.body.click();
  };

  const popover = (
    <Popover id="popover-basic">
      <Form>
        <Form.Group controlId="formGroupEmail">
          <Form.Label>Add New Filter</Form.Label>
          <Form.Control
            type="text"
            placeholder="New Filter"
            name="filter"
            onChange={e => onChange(e)}
          />
        </Form.Group>
        <Button variant="dark" type="submit" onClick={e => onSubmit(e)}>
          Add
        </Button>
      </Form>
    </Popover>
  );

  return (
    <Fragment>
      <label>
        <p className="filter-title">{props.title}</p>
      </label>
      <div className={props.className ? props.className : 'filter'}>
        {!props.retrievedFilter
          ? items.map((item, index) => {
              return (
                <div className="filter-text" key={index}>
                  {item}
                  <Button
                    className="filter-button"
                    size="sm"
                    onClick={() => deleteFilter(index)}
                  >
                    X
                  </Button>
                </div>
              );
            })
          : props.retrievedFilter.map((item, index) => {
              return (
                <div className="filter-text" key={index}>
                  {item}
                  <Button
                    className="filter-button"
                    size="sm"
                    onClick={() => deleteFilter(index)}
                  >
                    X
                  </Button>
                </div>
              );
            })}

        <OverlayTrigger
          trigger="click"
          placement="right"
          rootClose
          overlay={popover}
        >
          <p className="text-field">Type new one</p>
        </OverlayTrigger>
      </div>
    </Fragment>
  );
};

export default Filter;

однако retrievedItems отображается как пустой массив в консоли.

любая помощь будет оценена.

Ответы [ 2 ]

2 голосов
/ 09 июня 2019

setState асинхронно.Вы должны console.log внутри обработчика эффекта с массивом в качестве параметра. 

useEffect(() => console.log(retrieved_items), [ retrievedItems ])

Второй параметр обеспечивает запуск эффекта в случае изменения значений, переданных ему.

0 голосов
/ 09 июня 2019

На мой комментарий, вот фрагмент кода, который, я думаю, делает то, что вы хотите.

Я не смог запустить его в SO, но вот кодовое место: https://codepen.io/anon/pen/PrYYmz?editors=1010 (посмотрите Chromeконсоль при добавлении предметов) 

import React, {
  Fragment,
  useState,
  useEffect
} from 'react';

const Filter = props => {
  const [formData, setFormData] = useState({filter: ''});
  const [items, setItems] = useState([]);
  const [retrievedItems, setRetrievedItems] = useState([]);

  const addToFilter = newFilter => {
    let retrievedFilter = ["da vinci", "paris", "london"];
    console.log('add', retrievedFilter);
    if (retrievedFilter.length > 0) {
      setRetrievedItems([...retrievedItems, retrievedFilter]);
      retrievedFilter = 0;
      setRetrievedItems([...retrievedItems, newFilter]);
    } else {
      setItems([...items, newFilter]);
    }
    console.log('items are: ', items);
    console.log('retrieve filter', props.retrievedFilter);
    console.log('retrieved items: ', retrievedItems);
  };

  useEffect(() => {
    console.log('useEffect ', retrievedItems);
  }, [retrievedItems]);

  const deleteFilter = index => {
    // props.retrievedFilter.splice(index, 1);
    items.splice(index, 1);
    setItems([...items]);
    // setItems([...props.retrievedFilter, ...items]);
    console.log(items);
  };

  const {filter} = formData;
  const onChange = e => {
    setFormData({ ...formData,
      [e.target.name]: e.target.value
    });
  };

  const onSubmit = e => {
    e.preventDefault();
    addToFilter(filter);
    // Passing filter data up (i.e: to components that use <Filter />)
    //props.filterData(filter);
    //Close the Popover
    document.body.click();
  };

  return (
  <Fragment >
    <label >
    <p className = "filter-title" > {
      props.title
    } </p> </label> <
    div className = {
      props.className ? props.className : 'filter'
    } > {!props.retrievedFilter ?
      items.map((item, index) => {
        return ( <
          div className = "filter-text"
          key = {index} > {item} <button className = "filter-button" size = "sm" onClick = {() => deleteFilter(index)}>X</button></div>
        );
      }) :
        props.retrievedFilter.map((item, index) => {
        return ( <div className = "filter-text" key = {index} > {item} <button className = "filter-button" size = "sm" onClick = {() => deleteFilter(index)} >X</button></div>);})} <input type = "text" placeholder = "New Filter" name = "filter" onChange = {e => onChange(e) }/> 
        <button variant = "dark" type = "submit" onClick = {e => onSubmit(e)} >Add</button>
        </div>
    </Fragment>
  );
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
...