reactjs - React UI 没有更新，为什么？

Question

我有一个组件，叫 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.onBucketChallengeAdd = this.onBucketChallengeAdd.bind(this);
      this.onBucketChallengeIDChanged = this.onBucketChallengeIDChanged.bind(this);
      this.onBucketChallengeWeightChanged = this.onBucketChallengeWeightChanged.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>
                  <label>
                     <span className="text-center">Challenges<span>
                  </label>
                  <button type="button" className="btn btn-success btn-sm" onClick={() => this.onBucketChallengeAdd()}>Add Challenge</button>
               </div>
               <table className="table table-bordered table-striped show">
                  <thead>
                  <tr>
                     <th>Challenge ID</th>
                     <th>Weight</th>
                     <th>Action</th>
                  </tr>
                  </thead>
                  <tbody>
                  {this.state.bucketChallenges.map(this.renderBucketChallenges.bind(this))}
                  </tbody>
               </table>
            </div>
            …
         </div>
      </div>
   );
}

renderBucketChallenges(bucketIdx, idx){
   return (
      <tr key={idx}>
         <td className="col-xs-3 input-group-sm">
            <Select
               options={challengeIDOptions}
               defaultValue={challengeIDOptions[0]}
               onChange={this.onBucketChallengeIDChanged.bind(this, idx)}
               value={this.state.bucketChallengesID}
               isSearchable={true}
            />
         </td>
         <td className="col-xs-1 input-group-sm">
            <input type="text" className="form-control" value={this.state.bucketChallengesWeight}
                  onChange={(e) => this.onBucketChallengeWeightChanged(idx, e)} disabled={this.props.readOnly}>
            </input>
         </td>
         <td className="col-xs-1 input-group-sm">
            …
         </td>
         <td className="col-xs-1 input-group-sm">
            <input className="btn btn-danger btn-sm" id="deleteButton" type="button" value="Delete" onClick={() => this.onDeleteChallenge.bind(this, bucketIdx, idx)} />
         </td>
      </tr>
   );
}

onBucketChallengeAdd(){
   var newChallengeIndex = this.state.bucketChallengesIdx + 1;
   console.log("onBucketChallengeAdd(): " + newChallengeIndex);
   this.setState({bucketChallengesIdx: newChallengeIndex});
   this.props.onAddChallenge(this.props.idx, newChallengeIndex);
}

我遇到的问题是，当我单击“添加挑战”按钮时，我可以从 React 开发人员工具中看到正在添加新挑战，即使 UI 没有更新。当我转到我的应用程序的另一个选项卡并返回时，会添加 UI（添加挑战的新行就在那里）。为什么？关于如何解决这个问题的任何建议？谢谢！

更大的问题是，我是否在正确的轨道上实现这一目标？或者我应该将挑战部分提取到不同的组件？

标签： reactjs