使用 ES6 在 ReactJs 中自定义数组状态答案

【问题标题】：Customize Array State in ReactJs with ES6使用 ES6 在 ReactJs 中自定义数组状态
【发布时间】：2021-05-28 23:10:27
【问题描述】：

我正在从 api 获取一些数据（以数组形式）并将其分配给称为项目的状态。然后通过以下代码为状态的每个项目调用一个 Item 组件：

<div>
          {items.length} results found for {search_term}
          {items.map((item) =>
            (item.active_price > 0 && item.show) ? <Item key={item.id} details={item} items={items} setItems={setItems}/> : ""
          )}
        </div>

数组如下所示：

下一个计划是在 Item 组件中添加一个删除按钮，这将在 items 状态下将 show 的值更改为 false（对于单击的项目）。我在想的是，随着状态的变化，项目状态将被重新渲染，并且变为 false 的项目将从视图中隐藏。我在按钮上添加了一个 onCLick 事件监听器，功能是：

const handleClick = () => {
    console.log(({...props.items,[props.details.number - 1]:false}))
    // props.setItems(prevState=>({...prevState,[props.details.number - 1]:false}))
  }

我稍后会调用 props.setItems，但现在，我想看看我是否可以编辑该元素以将显示变为 false。上面的代码用 false 替换了整个索引。

在onClick函数中，我只想编辑show的值，而不是替换整个条目。我试过了：

({...props.items,[props.details.number - 1][show]:false})

和

({...props.items,[props.details.number - 1].show:false})

分别在[show] 和.show 之前显示语法错误。如何编辑我的 handleClick 函数以正确编辑 show 的值。

谢谢。

【问题讨论】：

标签： reactjs ecmascript-6

【解决方案1】：

看起来您正在将数组转换为当前方法中的对象。（第一个屏幕截图是一个数组，第二个是一个对象）。你会在那里遇到问题。

要从数组中删除项目，最简单的方法是使用.filter();

const handleClick = () => {
  props.setItems(
    prevState => prevState.filter(item => item.number !== props.details.number)
  );
}

设置 show 属性有点复杂。这是非常标准的方法，无需变异。

const handleClick = () => {
  props.setItems(prevState => {
    const itemIndex = prevState.findIndex(
      item => item.number == props.details.number
    );
    // Using 'props.details.number - 1' will not be a valid index when removing items
   return [
     ...prevState.slice(0, itemIndex), // Your state before the item being edited
     {...prevState[itemIndex], show: false}, // The edited item
     ...prevState.slice(itemIndex + 1) // The rest of the state after the item
   ]; 
  });
}

【讨论】：

【解决方案2】：

你可以试试下面的代码语法，假设 items 是 state here-

const [items,setItems]=.....

以下是代码

const handleClick = () => {
setItems({
  ...items,
  show: false,
})}

它将更新项目状态，值为 false。

【讨论】：