更新反应状态挂钩中的单个项目

Question

我有数组 useState 挂钩，它由具有类名的项目组成。我想从该挂钩更新单个项目的类名。如何更新 useState hook.Of 课程的单个值我将在更新前放置条件。这是代码 -

 display.map( word => 
   ( Words[leftPointer] === word.props.children ? 
      {...display, word:(<span key={uuid()} className="singleWord greenword"> 
      {Words[leftPointer]}</span>)} :
        display )
        )
 setDisplay(display)

此处显示包含跨度数组。我想要的是根据条件示例更改类名-更新项目后 className = "singleWord greenword" 应该是该项目的 className="singleWord"。

Answer 1

您能否只使用一个状态变量来保存 className 的文本并将 useState 挂钩上的状态变量更新为您想要的任何值？

Answer 2

Map 函数将 return 一个新数组，因此您只需将数组存储在一个新变量中并使用该新变量设置状态

const newDisplay = display.map( (word) =>{ 
    if(Words[leftPointer] === word.props.children){
      return {word:(<span key={uuid()} className="singleWord greenword"> 
      {Words[leftPointer]}</span>)}
    }else{
        return word
    }
  })
  setDisplay(newDisplay)

Answer 3

我建议不要在州域中设置 className，因为它是 UI 域的一部分。相反，数据更改可用于在 UI 渲染中发出响应信号。这就是程序 data-driven.

的意思

这是一个最小的可验证示例。 运行 下面的程序并更改一些数量以查看 display 状态更新。 className 根据应用于应用程序状态的条件自动更改。

function App() {
  const [display, setDisplay] = React.useState([
    {item: "walnut", quantity: 0 },
    {item: "peanut", quantity: 3 },
    {item: "donut", quantity: 6 }
  ])
  function update(index) { return event =>
    setDisplay([
      ...display.slice(0, index),
      { ...display[index], quantity: Number(event.target.value) },
      ...display.slice(index + 1)
    ])
  }   
  return <div>
    {display.map((d, index) =>
      <div key={index}>
        {d.item}:
        <input
          className={d.quantity > 0 ? "instock" : "outofstock" }
          value={d.quantity}
          onChange={update(index)}
        />
      </div>
    )}
    <div>{display.every(d => d.quantity > 0) ? "✅" : "❌"}</div>
    <pre>{JSON.stringify(display, null, 2)}</pre>
  </div>
}

ReactDOM.render(<App/>, document.querySelector("#app"))

input { outline: 0 }
.instock { border-color: limegreen; }
.outofstock { border-color: red; }
pre { padding: 0.5rem; background-color: #ffc; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

更新反应状态挂钩中的单个项目

Updating single item in react state hook

javascript

reactjs

react-hooks

react-map-gl