javascript - 在单击事件时更改数组中对象的值

Question

如何使用按钮 onClick 事件从 map 函数内部更改数组的值。在下面的示例中，我定义了具有三个对象的数组名称 visitMyArray，并且最初 visited 键的值设置为 false。使用 map 函数，我渲染 paragraph 标记内的所有 location。每个段落都会呈现一个按钮。是否可以将 visited 的值从 false 更改为 true 如果可能的话，我该怎么做。

import React from "react";
import {Button} from 'react-bootstrap';

class VisitComponent extends React.Component {

render(){
    let visitmyArray = [
        {
            location:"Indiana",
            visited:false
        },
        {
            location:"Illinoi",
            visited:false
        },
        {
            location:"Ohio",
            visited:false
        }
    ]
    return(
      <div>
        {visitmyArray.map((visitedArray, index) => {
             <div key={index}>
                <p>{visitedArray.location}</p>
                <Button onClick={"Change the visited value from 'false' to 'true' for this object value"}>Continue</Button>
             </div>
            )})}
      </div>
   }
}

export default VisitComponent

Answer 1

您可以将 map 上每个项目的 visited 属性设置为 true。您的 onClick 现在将是

onClick={() => {visitedArray.visited = true}}