Javascript React.js-将状态项设置为数组项，在其他状态项中引用，然后在数组项更改时更新状态

这里是我的问题，如果我将已设置为数组项（数组[0]）的状态项更新为该数组中的另一项（数组[1]），并且我有其他引用该数组的状态项，那么我是否应该知道其他状态项需要更新

如果是，那么为什么我的以下测试不起作用：

Class Decking extends React.Component  {

    constructor(props) {
        super(props)
        this.state = { 
            firstOption: props.product.acf.options.product_option[0],
            title: props.product.title,
        }

        this.state.product = {
            mainImage: {
                url: this.state.firstOption.image_gallery[0].source_url,
                alt: this.state.firstOption.image_gallery[0].alt_text,
            },
            thumbnails: this.state.firstOption.image_gallery,
            price: this.state.firstOption.price,
            dimensions: this.state.firstOption.dimensions,
            options: props.product.acf.options.product_option,
            desc: this.state.firstOption.description,
            spec: this.state.firstOption.size___length_spec
        }
    }

    toggleOptions(id) {
        const option = this.state.product.options[id]
        this.setState({firstOption: option})
    }

    render() {
        return (
           <div>
                <div className="flex flex-wrap">
                    <div className="w-1/2">
                        <img className="w-full shadow-xl" alt={this.state.product.mainImage.alt} src={this.state.product.mainImage.url} />
                        <div className="-ml-2">
                        {this.state.product.thumbnails.map((thumbnail, index) => (
                            <img className="w-16 border-solid border-3 border-blue-400 mx-2" key={index} src={thumbnail.source_url} alt={thumbnail.alt_text} />
                        ))}
                        </div>
                    </div>
                    <div className="w-1/2 pl-8">
                        <h1 className="text-4xl leading-normal">{this.state.title}</h1>
                        <div className="flex flex-wrap justify-between text-2xl mb-6">
                            <div className="font-light">
                            {this.state.product.dimensions}
                            </div>
                            <div className="font-light">
                            <b>Price:</b> {this.state.product.price}
                            </div>
                        </div>
                        <span className="text-xl font-light mb-4 block">Avaliable Options:</span>
                        <div className="flex flex-wrap mb-6 lg:mb-0">
                            {this.state.product.options.map((option, i) => (
                            <div className="w-full border-solid border-1 border-blue-400 shadow-lg flex items-center mb-4 px-5 py-4" key={i}>
                                <input onChange={e=>this.toggleOptions(e.target.id)} id={i} type="radio" /> <p className="checkChange mb-0 pl-4">{option.profileoption}</p>
                            </div>
                          ))}
                        </div>
                        <div className="w-full nomargin mb-4">
                            <b className="text-xl">Desc:</b>
                            <div dangerouslySetInnerHTML={{__html: this.state.product.desc}} />
                        </div>
                        <div className="w-full nomargin">
                            <b className="text-xl">Spec:</b>
                            <div dangerouslySetInnerHTML={{__html: this.state.product.spec}} />
                        </div>
                    </div>
                </div>
           </div>

        )
    }
}

这里是调用该方法的地方：

<div>
    {this.state.product.options.map((option, i) => (
        <div key={i}>
            <input onChange={e=>this.toggleOptions(e.target.id)} id={i} type="radio" /> <p>{option.profileoption}</p>
        </div>
     ))}
</div>

{this.state.product.options.map（（option，i）=>(
this.toggleOptions（e.target.id）}id={i}type=“radio”/>{option.profileoption}

))}

---

我希望我已经把我的问题说清楚了，我感谢您的注意：）

在

切换选项中
此
将是未定义的。要解决此问题，可以在构造函数中绑定事件处理程序，如下所示：

constructor( props ){
    super( props );
    this.toggleOptions = this.toggleOptions.bind(this);
  }

或者您可以将
toggleOptions
定义为箭头函数，如下所示：

const toggleOptions = (id) => {
    const option = this.state.product.options[id];
    this.setState({firstOption: option});
}

使用箭头函数会自动将
此
的范围绑定到函数。
在这种情况下，这不是未定义的。。我对此进行了测试，因为如果我在方法中更改标题（`title:option.profileoption```），它会将DOM更改为正确的标题。。我已经测试并确认它从阵列中获得了正确的物品！我已将选项记录为双击，并可以确认它正在获取正确的数组项，因此看起来它正在设置，但没有呈现其他状态项。我可以确认
this.state.firstOption
正在更改，但它所引用的状态在任何时候都不会更改。所以我猜react是为这些项目创建新项目，而不是引用原始数组项目的典型行为
const toggleOptions = (id) => {
    const option = this.state.product.options[id];
    this.setState({firstOption: option});
}