React电影搜索框提交空字符串仅渲染数组最后一个元素问题求解

• 逻辑顺序错误：即便搜索词为空时你设置了全量电影列表，后续的filter遍历逻辑依然会执行，会直接覆盖之前的全量设置
• filter方法误用：Array.filter 本身会返回所有符合条件的元素组成的新数组，你却在遍历回调中每匹配到一部电影，就将 searchedMovies 覆盖为仅包含当前电影的单元素数组，多次覆盖后最终只会保留最后一个匹配到的《Ex Machina》
• 频繁无效调用setState：在遍历中反复更新状态不仅会造成性能浪费，也因为setState的异步特性，无法在回调中拿到实时的状态值

先筛选出所有匹配结果再一次性更新状态，同时调整逻辑分支避免后续逻辑覆盖空搜索的设置：

import React from 'react';
import movies from './movieData';

const movieTitles = movies.map(movie => movie.title);
class SearchBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchQuery: '',
            searchedMovies: []
        }
    }
    
    handleQuery = e => {
        this.setState({
            searchQuery: e.target.value
        });
    }

    handleSearch = () => {   
        let matchedMovies = []
        if (this.state.searchQuery.trim() === '') {
            matchedMovies = movieTitles
        } else {
            // 先筛选出所有符合条件的电影，再统一更新状态
            matchedMovies = movieTitles.filter(movie => 
                movie.toLowerCase().includes(this.state.searchQuery.toLowerCase())
            )
        }
        this.setState({
            searchedMovies: matchedMovies,
            searchQuery: ''
        })
    }

    render() {
        return (
            <div>
                <input 
                type="text"
                placeholder="搜索电影.."
                name="searchQuery"
                value={this.state.searchQuery}
                onChange={this.handleQuery}
                />
                <button 
                onClick={this.handleSearch}
                >
                搜索
                </button>
                <br />
                {/* 优化渲染逻辑，用列表展示结果更清晰 */}
                <div>
                    {this.state.searchedMovies.map((title, index) => 
                        <p key={index}>{title}</p>
                    )}
                </div>
            </div>
        );
    }
}

export default SearchBar;

movieData.js 原有逻辑无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者Carinna Connif