React.js - 將狀態項設置為數組項，引用其他狀態項，然后在數組項更改時更新狀態

Question

這是我的問題，如果我將已設置為數組項 (array[0]) 的狀態項更新為該數組 (array[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>

        )
    }
}

我已將this.state.firstOption設置為數組項props.product.acf.options.product_option[0]

當我的toggleOptions方法被調用時，該項目會發生變化：

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

這里是調用方法的地方：

<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>

我希望我已經把我的問題說清楚了，感謝您的關注:)

Answer 1

在toggleOptions this將是未定義的。 為了解決這個問題，您可以像這樣在構造函數中綁定事件處理程序：

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});
}

使用箭頭函數會自動將this的作用域綁定到函數。