私はreactjsに戻ってきました。テーブルの順序は変更ドロップダウンで変更されません。
コンポーネントはイベント関数をマウントしました***
componentDidMount() {
this.setQuestionCount();
this.setQuestionList();
} }
テーブル本体のrenderAgent関数
renderAgents = (agent, index) => {
return (
<tr key={index}>
<td>{agent.REF_NO}</td>
<td>{Moment(agent.DATE).format('YYYY-MM-DD')}</td>
<td>{agent.DEVISION}</td>
<td>{(agent.JOB_ROLE)}</td>
<td>
<Link to={{
pathname: '/questionnaireView',
state: agent.REF_NO
}} ><FolderViewOutlined style={{ fontSize: 25 }} /> View</Link>
</td>
{/* <td>{agent.status}</td> */}
</tr>
);
}
ここで私の onChange 関数
fucntion onChangeOrder = (e) => {
console.log("order-" + e.target.value);
this.setState({ orderBy: e.target.value });
}
ドロップダウンメニュー
`<div className="form-group filter-input-container">
<label htmlFor="company">Sort by</label>
<select
id="company"
className="form-control filter_dropdown"
value={this.state.orderBy}
onChange={this.onChangeOrder}
>
<option value="true" selected>Newest</option>
<option value="false">Oldest</option>
</select>
</div>`
フラットリスト表
<table className="table">
<thead>
<tr>
<th scope="col">Reference</th>
<th scope="col">Date</th>
<th scope="col">Devision</th>
<th scope="col">Job Role</th>
<th scope="col">Questionnaire</th>
</tr>
</thead>
<tbody>
<FlatList
list={this.state.agentsList}
renderItem={this.renderAgents}
renderWhenEmpty={this.showBlank}
hasMoreItems={this.state.hasMore}
loadMoreItems={this.fetchData}
search={{
by: "DEVISION",
term: this.state.dvsn,
caseInsensitive: true,
minCharactersCount: 1,
onEveryWord: false,
by: this.handleSearchMatch
}}
sort={{
by: ["DATE", { key: "DATE", descending:
this.state.orderBy}],
descending: true,
caseInsensitive: true
}}
/>
[![enter image description here][1]][1]
</tbody>
</table>
ページの読み込みとハードコードのデケンディングがtrueの場合、機能しますが、ドロップダウンでコンテンツを変更しません。orderBy 状態の変更に正常に反応します。修正を手伝ってください