React：如何在每个映射的数组项上传递状态？

Question

我在函数组件中使用 Array.map 方法呈现了一个按钮列表。当我尝试将状态传递给每个映射的数组项时，渲染结果会立即更改所有数组项，而不是一个一个地更改。

这是我的代码。难道我做错了什么？抱歉，如果问题已在其他线程中解决，或者我使用了错误的方法。这是我的第一个 React 项目，我还在学习中。如果有人可以提供建议，我们将不胜感激。谢谢你！

import React, { useState } from "react"

export default function Comp() {

  const [isActive, setActive] = useState(false)

  const clickHandler = () => {

    setActive(!isActive)

    console.log(isActive)

  }

  const data = [

    { id: 1, name: "Alice" },

    { id: 2, name: "Bob" },

    { id: 3, name: "Charlie" },

  ]

  const renderList = items => {

    return items.map(item => (

      <li key={item.id}>

        <button onClick={clickHandler}>

          {item.name} {isActive ? "active" : "not active"}

        </button>

      </li>

    ))

  }

  return (

    <ul>{renderList(data)}</ul>

  )

}

Answer 1

将单个项目放入不同的组件中，以便每个组件都有自己的active状态：export default function Comp() {&nbsp; const data = [&nbsp; &nbsp; { id: 1, name: "Alice" },&nbsp; &nbsp; { id: 2, name: "Bob" },&nbsp; &nbsp; { id: 3, name: "Charlie" },&nbsp; ]&nbsp; const renderList = items => (&nbsp; &nbsp; items.map(item => <Item key={item.id} name={item.name} />)&nbsp; );&nbsp; return (&nbsp; &nbsp; <ul>{renderList(data)}</ul>&nbsp; )}const Item = ({ name }) => {&nbsp; const [isActive, setActive] = useState(false);&nbsp; const clickHandler = () => {&nbsp; &nbsp; setActive(!isActive);&nbsp; };&nbsp; &nbsp;return (&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <button onClick={clickHandler}>&nbsp; &nbsp; &nbsp; &nbsp; {name} {isActive ? "active" : "not active"}&nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </li>&nbsp; );};

Answer 2

您需要设置active-id在处理click-event. 这将依次呈现active/non-active conditionally：注意流量(1) > (2) > (3)function Comp() {&nbsp; const [activeId, setActiveId] = React.useState(null);&nbsp; const clickHandler = (item) => {&nbsp; &nbsp; setActiveId(item.id) // (2) click-handler will set the active id&nbsp; }&nbsp; const data = [&nbsp; &nbsp; { id: 1, name: "Alice" },&nbsp; &nbsp; { id: 2, name: "Bob" },&nbsp; &nbsp; { id: 3, name: "Charlie" },&nbsp; ]&nbsp; const renderList = items => {&nbsp; &nbsp; return items.map(item => (&nbsp; &nbsp; &nbsp; <li key={item.id}>&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={() => clickHandler(item)}> // (1) passing the clicked-item so that we can set the active-id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item.name} {item.id === activeId ?&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "active" : "not active" // (3) conditionally render&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; ))&nbsp; }&nbsp; return (&nbsp; &nbsp; <ul>{renderList(data)}</ul>&nbsp; )}祝你好运...