Javascript 反应选择：选择的选项不会粘住

我是一个反应新手，需要一些帮助来检查一下，看看我做错了什么：-

我有一个组件，叫做Bucket，每个Bucket可以有多个挑战，这是一个独立的组件，看起来是这样的，

代码的简化版本如下：

class CLL_Bucket extends Component {
   constructor(props) {
      super(props);
      this.state = {};
      this.state = {
         …
         bucketChallengesIdx: 0,       // to track the index of challegnes  
         bucketChallenges: this.props.bucket.bucketChallenges || [],
         …
      };

      …
      this.onBucketChallengeIDChanged = this.onBucketChallengeIDChanged.bind(this);
      …
   }

render() {
   const bucketIdx = this.props.idx;

   return (
      <div style={styles.container}>
         <div key={bucketIdx} className="row" style={styles.bucketStyle}>
            <div className="col-md-2">
               …
            </div>
            <div key={bucketIdx} className="col-md-4">
               <div>
                  …
               </div>
               <CLL_BucketChallengeDetail
                  challenges={this.props.challenges}
                  bucketChallengesIdx={this.state.bucketChallengesIdx}
                  bucketChallenges={this.state.bucketChallenges}
                  onBucketChallengeChanged={(challengeIdx, key, value) => this.onBucketChallengeChanged(challengeIdx, key,  value)}
/>
            </div>
            …
         </div>
      </div>
   );
}

class CLL_BucketChallengeDetail extends Component {

   constructor(props) {
      super(props);
      this.state = {
         bucketChallenges: this.props.bucketChallenges,
         bucketChallengeID: ""
      };

      this.onBucketChallengeIDChanged = this.onBucketChallengeIDChanged.bind(this);
      …
   }

   render() {
      return (
         <div className="col-md-4">
            <div>
               …
            </div>
            <table className="table table-bordered table-striped show">
               <thead>
               <tr>
                  <th>Challenge ID</th>
                  <th>Weight</th>
                  <th>Weight % Ratio</th>
                  <th>Action</th>
               </tr>
               </thead>
               <tbody>
               {this.props.bucketChallenges.map(this.renderChallengeDetail.bind(this))}
               </tbody>
            </table>
         </div>
      );
   }

   renderChallengeDetail(currentChallenge, index){

      const challengeIDOptions = this.props.challenges.map(data => {
         return {value: data.ID, label: data.ID}
      });
…

      return (
         <tr key={index}>
            <td className="col-xs-3 input-group-sm">
               <Select
                  options={challengeIDOptions}
                  defaultValue={challengeIDOptions[0]}
                  onChange={(option)=>this.onBucketChallengeIDChanged(index, option)}
                  isSearchable={true}
               />
            </td>
            …
         </tr>
      );
   }

   onBucketChallengeIDChanged(challengeIdx, option){

      var newChallengeList = this.state.bucketChallenges.map((item, j) => {
         if (j === challengeIdx) {
            // found the specific challenge in the list that needs to be updated
            item.ID = option.value;
         }
         return item;
      });

      this.setState({bucketChallenges:newChallengeList, bucketChallengeID:option.value},
         () => {console.log("HERE: "+ this.state.bucketChallengeID); this.props.onBucketChallengeChanged(challengeIdx, 'ID', option.value);});
   }
}

export default CLL_BucketChallengeDetail;

---

我遇到的问题是，在我更改质询ID后，它确实会显示在选择字段中，我可以从React developer工具中看到该值已更改，甚至setState正在将正确的值设置为this.state.BucketCallengeID。但是，当我切换到我的应用程序的另一个选项卡并返回后，更改的选择字段将恢复为上一个。我做错了什么？？？提前感谢您的帮助

看起来您总是将默认值设置为defaultValue={challengeIDOptions[0]}。因此，当您的组件加载时，它将重置为此默认值。如果每次切换选项卡时都要安装这些组件，则需要使用上下文或其他状态管理工具来保持状态。

我尝试不使用任何状态管理工具，以便了解React本身如何管理状态。在Redux或其他状态管理工具出现之前就有应用程序了。@我完全理解，但我想说的是，如果您每次返回此选项卡时都重新安装组件，则需要保持状态不变。这就是React的工作原理。每次组件重新装载时，都会重置本地状态，并且您的选择设置为您定义的默认值。你不需要使用Redux，你可以使用React上下文API，这正是它的用途。我明白了，很抱歉没有仔细阅读你的答案。。。我不熟悉React上下文API，但我会检查它。。。谢谢你的领导！