更改 React 中另一个数组中的数组中元素的值

Question

我正在尝试使用 React 更改另一个数组中的数组的值。

这是我的数组：

routes = [
    {
        id: 1,
        points: [{id, address, status}, {id, address, status},]
    },
    {
        id: 2,
        points: [{id, address, status}, {id, address, status},]
    },
]

以及我是如何设置的。当用户点击“接受”时，该特定点的状态应该会改变。

{routes.map((route, i) => (
    <div>...</div>
    {route.points.map((point, i) => (
        <Button onClick={() => this.onAcceptClicked(route.points)>Accept</Button>
    ))}
))}

我在这里尝试更改值，但我遗漏了一些东西或做的一切都完全错误。该特定点的状态应设置为 2。

onAcceptClicked = (points) => {
    const myNewArray = Object.assign([...points], {
        [index]: {
            ...deliveryPoints[index],
            status: 2
        }
    });
    //this.setState({ points: myNewArray }); ... not sure how to do this part
}

Answer 1

您将不得不更新该州的所有路线。

因为你已经有了索引，你可以跳过查找部分

{routes.map((route, i) => (
    <div>...</div>
    {route.points.map((point, j) => (
        <Button onClick={() => this.onAcceptClicked(route.points,i,j)>Accept</Button>
    ))}

并更新如下状态的路由（i 是路由数组中项目的索引，j 是点数组中项目的索引）

onAcceptClicked = (points,i,j) => {
    const myNewArray = [...this.state.routes];
    myNewArray[i].points[j]={...myNewArray[i].points[j],status:2};
    this.setState({ routes: myNewArray }); 
}

))}