Javascript 点击submit失败后，根据单选按钮和输入字段的值过滤React中表中的数据

我有来自本地json文件的数据，用于创建表。 在Table类组件中，我有一个包含前10部电影的表。数据是从Filteredata状态变量显示的，并且在加载表后显示良好。上表中有两个单选按钮，用于选择是否要使用函数searchHandler根据状态变量radioSearch中保存的列标题或列类型搜索数据。然后我有一个输入字段，当我在其中输入一个字符串时，结果将通过使用updatedSearch函数保存在searchFieldInput状态变量中。 最后，我在这个组件中使用submitHandler函数，根据选定的单选按钮（电影的标题/类型）过滤表格，然后根据输入字段中输入的字符串过滤表格。我将过滤后的数据放入filteredData变量中，以便使用setState更新状态。不幸的是，点击提交后没有进行过滤。表内组件是嵌套的TableRow组件，它应根据应用的筛选显示数据。我不知道submitHandler函数的概念是否错误，为什么不过滤数据？有人能帮忙吗。 以下是我的表格组件：

import React, {Component} from 'react';
import TableRow from './TableRow/TableRow';

    class Table extends Component {
        constructor(props) {
            super(props)
            this.state = {
                filteredData: this.props.data,
                searchFieldInput: '',
                radioSearch: this.props.radioSearch,
                transformed: false
            }
        }

        updatedSearch = (event) => {
            this.setState({
                searchFieldInput: event.target.value
            })
        }

        searchHandler = (e) => {
            this.setState({
                radioSearch: e.target.value
            })
        };

        submitHandler = (event) => {

            event.preventDefault();

            if(this.state.radioSearch === "title") {
                let filteredData = this.props.data.filter(column => {
                    return column.title.toLowerCase().indexOf(this.state.searchFieldInput.toLowerCase()) !== -1; 
            }); 
                this.setState({
                    filteredData: filteredData
                });

                return this.state.filteredData;

            }   else if(this.state.radioSearch === "genre"){
                let filteredData = this.props.data.filter(column => {
                    return column.genre.toLowerCase().indexOf(this.state.searchFieldInput.toLowerCase()) !== -1; 
            });
                this.setState({
                    filteredData: filteredData
                });

                return this.state.filteredData;
            }

            console.log(this.state.radioSearch);
        }

        render() {

                let filteredData = this.props.data.filter(column => {
                    return column.title.toLowerCase().indexOf(this.state.searchFieldInput.toLowerCase()) !== -1; 
            }); 
            return(
                <React.Fragment>
                    <div className="container-fluid">
                        <div className="container">
                            <form>
                                {/*Search field*/}  
                                <input
                                    className={"Search" + (this.state.transformed === true ?
                                            ' transformed' : '')} 
                                    type="text"
                                    placeholder={(this.state.transformed === true ? 
                                    '' : 'Type here')}
                                    maxLength="20"
                                    value={this.state.searchFieldInput} required
                                    onChange={this.updatedSearch.bind(this)}
                                />

                                <button type="submit">
                                    Search
                                </button>

                                {/*Radio buttons*/}
                                <label htmlFor="title">
                                    <input type="radio" name="title" id="title" value="title" checked={this.state.radioSearch === "title"} 
                                    onChange={this.searchHandler}/>
                                    title
                                </label>
                                <label htmlFor="genre">
                                    <input type="radio" name="genre" id="genre" value="genre" checked={this.state.radioSearch === "genre"} 
                                    onChange={this.searchHandler}/>
                                    genre
                                </label> 
                            </form>
                        </div>
                        <div className="container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Picture</th>
                                        <th>Release date</th>
                                        <th>Genre</th>
                                        <th>Rating</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   {this.state.filteredData.map((row, index) => {
                                        return (
                                            <TableRow 
                                                numeration={index + 1}
                                                key={row.id} 
                                                row={row}
                                            />
                                        )
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>     
                </React.Fragment>
            )
        }
    }

    export default Table;

import React，{Component}来自'React'；
从“./TableRow/TableRow”导入TableRow；
类表扩展组件{
建造师（道具）{
超级（道具）
此.state={
filteredData:this.props.data，
searchFieldInput:“”，
无线电搜索：这个。道具。无线电搜索，
转化：假
}
}
updatedSearch=（事件）=>{
这是我的国家({
searchFieldInput:event.target.value
})
}
searchHandler=（e）=>{
这是我的国家({
无线电搜索：e.target.value
})
};
submitHandler=（事件）=>{
event.preventDefault（）；
if（this.state.radioSearch==“title”）{
让filteredData=this.props.data.filter（列=>{
返回column.title.toLowerCase（）.indexOf（this.state.searchFieldInput.toLowerCase（））！=-1；
}); 
这是我的国家({
过滤数据：过滤数据
});
返回此.state.filteredData；
}else if（this.state.radioSearch==“流派”）{
让filteredData=this.props.data.filter（列=>{
返回column.genre.toLowerCase（）.indexOf（this.state.searchFieldInput.toLowerCase（））！=-1；
});
这是我的国家({
过滤数据：过滤数据
});
返回此.state.filteredData；
}
console.log（this.state.radioSearch）；
}
render（）{
让filteredData=this.props.data.filter（列=>{
返回column.title.toLowerCase（）.indexOf（this.state.searchFieldInput.toLowerCase（））！=-1；
}); 
返回(
{/*搜索字段*/}
搜索
{/*单选按钮*/}
标题
体裁
不
图画
发布日期
体裁
评级
{this.state.filteredData.map（（行，索引）=>{
返回(
)
})
}
)
}
}
导出默认表；

我认为这是因为您忘记将功能添加到提交按钮：

<button type="submit" onSubmit={this.submitHandler.bind(this)}>
  Search 
</button>

搜索

您是否收到错误？你能检查一下控制台吗。此外，您还需要在构造函数处或指定位置使用

.bind（this）

绑定所有函数。没有错误，数据只是没有显示添加，但遗憾的是没有更改。不进行筛选，表将保持与第一次加载时相同的状态。通过此操作获得。submitHandler（event）}>dabishan，感谢您的提示：）