正在更新处于反应状态挂钩的单个项目

Question

我有一个数组useState钩子，它由className的项组成。我想从那个钩子更新单个项的className。如何更新useState钩子的单个值。当然，我会把条件放在更新之前。这是代码-

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

此处显示包含跨度数组。我想要的是在更新项之后，根据条件示例更改classNameclassName＝"；singleWord绿色单词"；应该是className＝"；singleWord"；该项目的。

Answer 1

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

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 2

我建议不要在状态的域中设置className，因为它是UI域的一部分。相反，数据更改可以用于在UI呈现中发出响应信号。这就是数据驱动程序的意义所在。

下面是一个可验证的最小示例运行下面的程序并更改一些数量以查看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>

Answer 3

您可以使用一个保存className文本的状态变量，并将useState挂钩上的状态变量更新为您想要的任何值吗？