javascript - 如何将整个数组添加到 useState 变量

Question

我正在尝试将整个数组添加到 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 在控制台中显示为空数组。

如有任何帮助，我们将不胜感激。

Answer 1

setState 是异步的。您必须将数组作为参数在效果 Hook 内进行 console.log。

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

第二个参数确保效果在传递给它的值发生变化时触发。