React组件的Render Props方法失效，请求技术排查与解决

我帮你梳理下代码里的几个关键问题，这就是筛选功能没生效的核心原因：

问题点拆解 #

• Render Props 未传递筛选值：你的Filter组件虽然自己维护了输入框的状态，但从来没把输入的关键词传递给通过render props传入的getName函数——相当于筛选逻辑根本不知道用户输入了什么，自然没法生效。
• Body组件调用getName时没传参：在Body的render方法里，你直接调用this.getName()，没有传入任何筛选值，就算Filter传了值也用不上。
• 冗余/未定义的代码：Body的getName里用到了this.state.add，但你的state初始化里根本没这个字段，会触发报错；另外Body里定义了getValueInput方法却完全没用到，反而Filter自己维护了input状态，逻辑分工混乱。

修复后的代码 #

1. 调整Filter组件（传递筛选值给Render Props） #

让Filter在输入变化时，把当前的输入值传给render props方法：

import React from 'react';

class Filter extends React.Component {
  constructor() {
    super();
    this.state = { input: '' }
  }

  getValueInput = (evt) => {
    const inputValue = evt.target.value;
    this.setState({ input: inputValue });
  }

  render() {
    // 关键：把当前输入的筛选关键词传递给render props函数
    return (
      <div>
        <input 
          placeholder='Search name here' 
          type="text" 
          onChange={this.getValueInput} 
          value={this.state.input} {/* 绑定value，把输入框改成受控组件，避免输入异常 */}
        />
        {/* 调用传入的render方法，传递筛选值 */}
        {this.props.render(this.state.input)}
      </div>
    )
  }
}

export default Filter

2. 优化Body组件（接收筛选值并渲染） #

移除冗余代码，确保筛选逻辑正常工作：

import React from 'react'; 
import './Body.css'; 
import { Link } from "react-router-dom"; 
import axios from 'axios'; 
import Filter from './Filter'; 

class Body extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      employee: []
      // 如果不需要在Body里维护筛选值，这里可以不用定义input字段
    } 
  } 

  componentDidMount() { 
    axios 
      .get("http://127.0.0.1:3004/employee") 
      .then(response => this.setState({ employee: response.data })); 
  } 

  // 接收Filter传递过来的筛选关键词，默认值为空字符串，确保初始显示所有员工
  getName = (filter = '') => { 
    const { employee } = this.state;
    // 移除了未定义的add字段，避免报错
    return employee.filter(emp => emp.name.includes(filter)).map(emp => ( 
      <div className='item' key={emp.id}> 
        <Link className="link" to={`/user/${emp.id}`}> 
          <div> 
            <img className="img" alt="employee avatar" src={`https://picsum.photos/${emp.id}`} /> 
          </div> 
          <h1 className="name2"> {emp.name} </h1> 
        </Link> 
      </div>  
    )); 
  }; 

  render() { 
    return ( 
      <div> 
        <h4 className="manager"> 
          Hello {this.props.currentManager}, here be all employees available for change. 
        </h4> 
        {/* 把渲染筛选结果的职责交给Filter组件，避免重复渲染 */}
        <div className="input"> 
          <Filter render={this.getName} /> 
        </div> 
      </div> 
    ) 
  } 
} 

export default Body;

修复说明 #

1. Filter组件：现在输入框是受控组件，每次输入变化时都会把当前值传递给render props方法，让Body的getName函数能拿到筛选关键词。
2. Body组件：
   • 移除了没用的getValueInput方法，筛选值现在由Filter维护并传递
   • getName函数接收filter参数，默认空字符串保证初始状态显示所有员工
   • 删掉了未定义的add字段，避免控制台报错
   • 移除了原来的<div className="body">{this.getName()}</div>，避免重复渲染员工列表，现在完全由Filter负责渲染筛选后的结果

这样修改后，你的姓名筛选功能就能正常工作啦！

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