如何使用特定的數組索引更改狀態數組的對象值

Question

我正在嘗試使用 setState 從狀態數組更改對象鍵的值。 更改應該是這樣的，即只應從索引i的數組中更改 object 的特定值。 這個索引傳遞如下

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

class StepComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { 
                    step: "Step1",
                    visited: false
                },
                { 
                    step: "Step2",
                    visited: false
                },
                { 
                    step: "Step3",
                    visited: false
                }
            ]
        };
    }
    nextStep(i) {

        //Change the visited value of object from data[i] array from false to true
        //Something like below

        this.setState({
            data[i]:visited to true
        })
    }

    render(){
        let visitSteps = this.state.data;
        return(
            <div>
                {visitSteps.map((visitedStep, index) => (
                    <div key={index}>
                        <p>{visitedStep.step}</p>
                        <Button onClick={() => this.nextStep(i)}>Continue</Button>
                    </div>
                ))}
            </div>
        )
    }
}

export default StepComponent

根據上面給出的每個onClick事件的示例，visited 的特定對象值的值從false更改為true

Answer 1

您可以創建一個數組等於您的數據的變量，更改作為輸入傳遞的索引，然后調用傳遞新數組的設置狀態。

    nextStep(i) {
        let visitesList = [...this.state.data];
        visitesList[i].visited = true;

        this.setState({
            data: visitesList
        })
    }

如果您只想一次執行一個步驟，則可以使用 map 函數

  nextStep(i) {
    this.setState({
      data: this.state.data.map((e, index) => {
        e.visited = i === index;
        return e;
      })
    });
  }

此外，在Button上調用nextStep時，請使用nextStep(index)調用它

Answer 2

更改數組的特定對象屬性。

class App extends React.Component {
      state = {
        data:[
                { 
                    step: "Step1",
                    visited: false
                },
                { 
                    step: "Step2",
                    visited: false
                },
                { 
                    step: "Step3",
                    visited: false
                }
            ]
  };
  handleClick = item => {
    const { data } = this.state;
    let obj = data.find(a => a.step === item.step);
    obj.visited = true;
    let filtered = data.filter(a => a.step !== item.step);
    this.setState({ data: [obj, ...filtered] });
  };
  render() {
  console.log(this.state.data);
    return (
      <div>
        {this.state.data.map(a => (
          <button key={a.step} style={{ color: a.visited ? "red" : "" }} onClick={() => this.handleClick(a)}>
            {a.step}
          </button>
        ))}
      </div>
    );
  }
}

現場演示