Question

我的react / redux / es6应用程序中有一个无状态下拉列表组件。我将其选定的值存储在状态中，以便记住先前选择的值。但是，每次用户导航到此页面时，最初都不会正确选择下拉列表的值。触发重新呈现视图的任何操作都会正确设置值。

我可以确认每次都正确地将值传递给下拉列表组件，包括第一次呈现视图。

const DropDownList = ({name, label, options, selectedValue, error, onChange}) => {
let wrapperClass = 'form-group';
if (error && error.length > 0) {
  wrapperClass += " " + 'has-error';
}

let optionsMarkup =  [];

for(let i=0;i<options.length;i++){
  optionsMarkup.push(<option key={options[i]}>{options[i]}</option>);
}

return (
  <div className={wrapperClass}>
    <label htmlFor={name} className="control-label">{label}</label>
    <select name={name} title="Please select" data-live-search="true" className="form-control" onChange={onChange} value={selectedValue}>
      {optionsMarkup}
    </select>
  </div>
 );
};

看起来非常简单。有一个无状态组件将值传递给这个：

const SearchForm = ({name, onSubmit, topText, onSearchTermChange, onCategoryChange, submitting, errors, searchResults, searchTerm, searchCategory}) => {

const reasons = ['Select a Reason for Search',
        'A',
        'B',
        'C',
        'D'];

return (
  <section>
    <ErrorSummary errors={errors} />
    <p>{topText}</p>
    <form role="form">
      <TextInput
        name="searchTerms"
        label="Search Terms"
        placeholder="Example search here"
        type="text"
        error={errors.title}
        onChange={onSearchTermChange}
        value={searchTerm} />

      <DropDownList
        name={name}
        label="Seaarch Reason"
        options ={reasons}
        selectedValue={searchCategory}
        onChange={onCategoryChange} />

      <div className="col-md-2 col-xs-12">
        <button type="submit" className="btn btn-primary col-md-12" onClick={onSubmit} disabled={submitting}>{submitting ? "Searching" : "Search"}</button>
      </div>
    </form>
  </section>
  );
};

并且有一个有状态组件，它包含两个SearchForms，传递事件处理程序：

render() {
  return(
    <section>
      <div className="tab-content">
        <div className="col-md-12 tab-pane active" role="tabpanel" id="searchPage">
          <div className="container">
            <div className="row">
              <div className="col-md-12 well center-block">
                <nav role="navigation">
                  <ul className="nav nav-pills nav-justified">
                    <li role="presentation" className={this.props.searchView == "searchOne" ? "active" : ""}><a href="#searchOne" data-toggle="tab" onClick={this.searchViewChanged.bind(null, "searchOne")}>search One</a></li>
                  <li role="presentation" className={this.props.searchView == "searchTwo" ? "active" : ""}><a href="#searchTwo" data-toggle="tab" onClick={this.searchViewChanged.bind(null, "searchTwo")}>search Two</a></li>
                </ul>
              </nav>
              <div className="tab-content">
              <div className={this.props.searchView == "searchOne" ? "col-md-12 well tab-pane active" : "col-md-12 well tab-pane"} role="tabpanel" id="searchOne">
                <SearchForm
                  name="searchOne"
                  onSubmit={this.searchOne}
                  topText="search one text"
                  submitting={this.state.submitting}
                  errors={this.state.searchOneErrors}
                  onSearchTermChange={this.searchOneTermChanged}
                  onCategoryChange={this.searchOneCategoryChanged}
                  searchResults={this.props.searchOneSearchResults}
                  searchTerm={this.state.searchOneTerm}
                  searchCategory={this.state.searchOneCategory} />
              </div>
              <div className={this.props.searchView == "searchTwo" ? "col-md-12 well tab-pane active" : "col-md-12 well tab-pane"} role="tabpanel" id="searchTwo">
                <SearchForm
                  name="searchTwo"
                  onSubmit={this.searchTwo}
                  topText="search Two text"
                  submitting={this.state.submitting}
                  errors={this.state.searchTwoSearchErrors}
                  onSearchTermChange={this.searchTwoSearchTermChanged}
                  onCategoryChange={this.searchTwoCategoryChanged}
                  searchTerm={this.state.searchTwoTerm}
                  searchCategory={this.state.searchTwoCategory} />
              </div>
            </div>
          </div>
        </div>
        ....
        ....
      </div>
    </div>
  </div>
  </section>

我不知道为什么会这样。有什么想法吗？

Answer 1

我不相信这是多么简单。我只需要添加＆＃34;值＆＃34;选项和所有设置。不确定为什么它在没有value属性的情况下重新渲染。因此，DropdownList组件中的for循环应如下所示：

; slow, not recommended.
vpmovzxdq  ymm0, [src]
vpsllq     ymm1, ymm0,32          ; left shift by 32
vpor       ymm0, ymm0, odd_ones   ; OR with set1_epi64x(1ULL << 32)
vpaddd     ymm0, ymm0, ymm1       ; I_n+0 in even elements, 1+I_n in odd

Answer 2

也许它与您传递道具的方式有关？

searchTerm={this.state.searchTwoTerm}

你为什么直接使用this.state。因为您使用redux更好的方法是调用mapStateToProps并连接组件（然后使用this.props）文档：http://redux.js.org/docs/basics/UsageWithReact.html

但这只是一个想法，不知道它是否是问题。

第二个想法是你可能没有在reducer中设置 searchTwoTerm 的默认值，所以如果你刷新页面，持久化状态就会消失，默认值就会消失。（但是你甚至写过了第一次组件渲染，值很好..所以它也可能不是这样。）

React下拉列表组件选择的值最初未绑定

2 个答案: