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

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 组件传递的函数，它包含 setState 语句。如果它被触发，Parent 组件 re-rendering 将会发生。

在handleChange(e)函数中，在

之后

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

这会改变 Child 的状态

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

re-render是Parent的成分，当然还有Child参与。于是又初始化了state值，好像什么都没发生一样。

也许您想使用 Parent 组件中的道具为 state.value 赋值。

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

setState doesn't work when function passed through props is used

javascript

state

reactjs

react-props