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

我试图将整个数组添加到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;

import React，{Fragment，useState，useffect}来自'React'；
从“react bootstrap”导入{Form，Button，Popover，OverlyTrigger}；
常量过滤器=道具=>{
常量[formData，setFormData]=useState({
筛选器：“”
});
const[items，setItems]=useState（[]）；
常量[retrievedItems，setRetrievedItems]=useState（[]）；
const addToFilter=newFilter=>{
让retrievedFilter=[“达芬奇”、“巴黎”、“伦敦”]；
console.log（retrievedFilter）；
如果（retrievedFilter.length>0）{
setRetrievedItems（[…retrievedItems，retrievedFilter]）；
retrievedFilter=0；
setRetrievedItems（[…retrievedItems，newFilter]）；
}否则{
setItems（[…items，newFilter]）；
}
log（'项为：'，项）；
console.log（'retrieve filter'，props.retrievedFilter）；
log（'retrievedItems:'，retrievedItems）；
};
useffect（（）=>{
console.log（'useffect'，retrievedItems）；
}，[retrievedItems]）；
常量deleteFilter=索引=>{
//props.retrievedFilter.拼接（索引1）；
项目.拼接（索引，1）；
设置项（[…项]）；
//setItems（[…props.retrievedFilter，…items]）；
控制台日志（项目）；
};
常量{filter}=formData；
const onChange=e=>{
setFormData（{…formData，[e.target.name]：e.target.value}）；
};
const onSubmit=e=>{
e、 预防默认值（）；
添加过滤器（过滤器）；
//向上传递过滤器数据（即：向上传递到使用过滤器的组件）
道具过滤器数据（过滤器）；
//合上爆米花
document.body.click（）；
};
常数popover=(
添加新过滤器
onChange（e）}
/>
onSubmit（e）}>
添加
);
返回(
{props.title}
{！props.retrievedFilter
？项目图（（项目，索引）=>{
返回(
{item}
deleteFilter（索引）}
>
X
);
})
：props.retrievedFilter.map（（项目，索引）=>{
返回(
{item}
deleteFilter（索引）}
>
X
);
})}
键入新字段
);
};
导出默认过滤器；

但是，retrievedItems在控制台中显示为空数组

---

任何帮助都将不胜感激。

setState

是异步的。您必须将console.log放在一个带有数组作为参数的效果挂钩中

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

---

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

根据我的注释，这里有一个代码片段，我认为它符合您的要求

我无法让它运行，所以这里有一个代码笔：（在添加项目时观察chrome控制台）

import-React{
碎片，
useState，
使用效果
}从"反应",；
常量过滤器=道具=>{
const[formData，setFormData]=useState（{filter:'}）；
const[items，setItems]=useState（[]）；
常量[retrievedItems，setRetrievedItems]=useState（[]）；
const addToFilter=newFilter=>{
让retrievedFilter=[“达芬奇”、“巴黎”、“伦敦”]；
log（'add'，retrievedFilter）；
如果（retrievedFilter.length>0）{
setRetrievedItems（[…retrievedItems，retrievedFilter]）；
retrievedFilter=0；
setRetrievedItems（[…retrievedItems，newFilter]）；
}否则{
setItems（[…items，newFilter]）；
}
log（'项为：'，项）；
console.log（'retrieve filter'，props.retrievedFilter）；
log（'retrievedItems:'，retrievedItems）；
};
useffect（（）=>{
console.log（'useffect'，retrievedItems）；
}，[retrievedItems]）；
常量deleteFilter=索引=>{
//props.retrievedFilter.拼接（索引1）；
项目.拼接（索引，1）；
设置项（[…项]）；
//setItems（[…props.retrievedFilter，…items]）；
控制台日志（项目）；
};
常量{filter}=formData；
const onChange=e=>{
setFormData（{…formData，
[e.target.name]：e.target.value
});
};
const onSubmit=e=>{
e、 预防默认值（）；
添加过滤器（过滤器）；
//向上传递过滤器数据（即：向上传递到使用过滤器的组件）
//道具过滤器数据（过滤器）；
//合上爆米花
document.body.click（）；
};
返回(
{
道具名称
}
<
div类名称={
props.className？props.className:“过滤器”
}>{！props.retrievedFilter？
items.map（（项目，索引）=>{
报税表（<
div className=“过滤文本”
key={index}>{item}deleteFilter（index）}>X
);
}) :
props.retrievedFilter.map（（项目，索引）=>{
return（{item}deleteFilter（index）}>X）；}}}onChange（e）}/>
onSubmit（e）}>添加
);
};

setState是异步的。你必须在一个效果钩子里console.log。Checkout@AvinKavish我仍然在使用一个空数组effect。道具的值是多少。retrievedFilter？@mkaatman这个值是一个字符串数组，像[“达芬奇”、“达芬奇”、“达芬奇”]谢谢你的回答，我真正想做的是拥有retrievedFilter（即：[“达芬奇”、“巴黎”），“london”]），然后向ITI添加新的过滤器如果您从您所在州的这些值开始，它似乎可以工作<代码>常量[retrievedItems，setRetrievedItems]=useState（[“达芬奇”，“巴黎”，“伦敦]）这就是答案，谢谢，我需要首先将这些值放在useState中。