如何为react js中嵌套在列表中的字典设置状态？

constructor(props) {
  super(props);
  this.state = {
    dictionary: [
      { id: 1, name: "Apple", status: "active" },
      { id: 2, name: "Banana", status: "active" },
      { id: 3, name: "Orange", status: "active" }
    ]
  };
}

updateStatus(index, newStatus) {
  this.setState(prevState => {
    const updatedDictionary = [...prevState.dictionary];
    updatedDictionary[index].status = newStatus;
    return { dictionary: updatedDictionary };
  });
}

render() {
  return (
    <div>
      {this.state.dictionary.map((item, index) => (
        <div key={item.id}>
          <span>{item.name}</span>
          <span>{item.status}</span>
          <button onClick={() => this.updateStatus(index, "inactive")}>Set Inactive</button>
        </div>
      ))}
    </div>
  );
}