React子组件调用props传递的函数时setState失效的原因及解决方法

让我来帮你分析一下问题所在，然后一步步解决它：

首先看你遇到的核心现象：调用sendValue时子组件状态完全不更新，连console.log都没执行，移除那行就正常。这背后有几个关键的代码错误，我逐个拆解：

问题1：子组件state字段和input绑定不匹配 #

你子组件的input绑定的是this.state.value，但handleChange里更新的是state.input——相当于你把值存在了抽屉A，却去抽屉B找，自然看不到变化！这是导致输入框值不更新的直接原因。

问题2：setState的回调用错了 #

setState的第二个参数需要是函数，但你写的console.log('state', this.state)会立刻执行（而不是等状态更新后），打印的还是旧状态，根本起不到验证作用。而且如果后续代码出错，这个console.log可能因为函数中断而没执行。

问题3：父组件sendValue的this指向可能有问题 #

你直接把this.sendValue传给子组件，如果没给这个函数绑定this，子组件调用时sendValue里的this会变成undefined，导致this.setState抛出错误。虽然有catch，但这个错误可能干扰组件渲染流程，间接让子组件的状态更新失效。

问题4：URL里的\r是无效字符 #

回车符\r不属于合法URL字符，会让请求地址失效，触发catch逻辑，频繁的错误请求也可能影响组件稳定性。

现在来逐个修复： #

1. 修正子组件state字段与input的匹配

把handleChange里的setState改为更新value字段，和input绑定的保持一致：

handleChange(e) {
  const { value } = e.target;
  // 这里把input改成value，和input绑定的state字段对应
  this.setState({ value: value }, () => {
    // 用箭头函数作为回调，确保打印的是更新后的state
    console.log('state', this.state);
  });
  // 这里去掉\r，后面在父组件统一处理，避免重复操作
  this.props.sendValue(value);
}

2. 正确使用setState的回调

把console.log放在箭头函数里，这样只有当状态真正更新完成后才会执行：

this.setState({ value }, () => console.log('state', this.state));

3. 确保父组件sendValue的this指向正确

有两种简单的方式：

• 方式1：构造函数绑定
  在父组件的constructor里给sendValue绑定this：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
    // 绑定this，确保调用时指向当前组件实例
    this.sendValue = this.sendValue.bind(this);
  }

  sendValue(value) {
    // 如果后端确实需要\r，用URL编码%0D代替原始字符
    const url = `${myURL}/c${value}%0D`;
    axios.get(url)
      .then(res => this.setState({ data: res.data }))
      .catch(err => console.log('err', err));
  }
}

• 方式2：箭头函数定义sendValue
  箭头函数会自动绑定当前组件的this，不用手动绑定：

class App extends React.Component {
  state = { data: null };

  // 箭头函数自动绑定this
  sendValue = (value) => {
    const url = `${myURL}/c${value}%0D`;
    axios.get(url)
      .then(res => this.setState({ data: res.data }))
      .catch(err => console.log('err', err));
  }
}

4. 修复URL中的无效字符

把\r换成URL编码%0D，或者如果后端不需要这个字符直接去掉，避免请求失败：

const url = `${myURL}/c${value}`; // 不需要\r的话直接去掉
// 或者需要的话用编码：
const url = `${myURL}/c${value}%0D`;

5. 给子组件handleChange绑定this（可选但推荐）

避免子组件调用handleChange时this指向错误，同样可以用构造函数绑定或者箭头函数：

// 子组件构造函数绑定
constructor(props) {
  super(props);
  this.state = { value: '' };
  this.handleChange = this.handleChange.bind(this);
}

// 或者用箭头函数定义handleChange
handleChange = (e) => {
  const { value } = e.target;
  this.setState({ value }, () => console.log('state', this.state));
  this.props.sendValue(value);
}

按照这些步骤修改后，子组件的状态应该能正常更新，同时sendValue也能正常发起请求了。

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