Question

我有一个React组件（App.js）来执行ajax请求（通过axios）。通过这些请求传递的参数值取自用户操作的输入字段。根据响应，它更新其状态。

sendValue(value) {
  const url = `${myURl}/c${value}\r`;
  axios.get(url)
        .then(res=>{
              this.setState({
                       data:res.data
              })
         })
         .catch(err => {
            console.log('err', err);
         })  
}

然后在return语句中，此函数作为prop传递给子组件：

<Child sendValue={this.sendValue}>

子组件（Child.js）有几个输入字段。这个子组件有自己的状态。当输入字段改变时，值将通过props传递给axios函数。

handleChange(e) {
      const { value } = e.target;
      this.setState({ input: value }, console.log('state', this.state));
      this.props.sendValue(`${value}\r`);
}

实际的输入元素如下所示：

<input
    value={this.state.value}
    onChange={this.handleChange}
 />

如果我省略此行this.props.sendValue(${value}\r);，状态会更新，输入字段的值会更改（console.log作为回调函数证明了这一点，并且输入字段的实际值也会更改）。但是当我把它留下来时，没有任何变化，状态永远不会更新，console.log永远不会被调用。

为什么呢？

我该如何解决这个问题？

Answer 1

我假设你的Child组件如下所示，问题出现在Child的构造函数中，我猜你初始化那里的状态。

class Child extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      value: 'init-value' // or null
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
   ....
  }

  render() {
    return (
      ....
      <input value={this.state.value} onChange={this.handleChange} />
      ....
    );
  }
}

this.props.sendValue是从（属于）Parent Component传递的函数，它包含setState语句。如果它被触发，则会发生父组件重新呈现。

在handleChange(e)函数中

之后

this.setState({ input: value }, console.log('state', this.state));

改变了孩子的状态

this.props.sendValue(`${value}\r`);

重新渲染父组件，当然，Child也参与其中。因此，state值再次初始化，似乎没有任何反应。

也许您想使用Parent Component中的props来为state.value赋值。

使用通过道具传递的函数时，setState不起作用

1 个答案: