0

我rewest到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 状态更改。请帮我修复

4

0 回答 0