Question

所以我在一个组件中更新我的状态，然后将新的props传递给子，但是孩子没有正确更新，输入的defaultValue没有改变。起初我以为可能是因为我正在使用this.props开始使用this.states并首先在那里应用新的道具但似乎没有用。

父组件

this.state.newDetails == null ? '' : 
    <NewDetailsView details={this.state.newDetails} />

子组件：

import React, { Component } from 'react';

class NewDetailsView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      details: (this.props.details!= null) ? this.props.details: null
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ details: nextProps });
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <input type="text" defaultValue={this.state.details.id} />
      </div>
    );
  }
}

export default NewDetailsView ;

解决方案代码：

...待定

Answer 1

问题在componentWillReceiveProps：

内

this.setState({ details: nextProps });

它应该是：

this.setState({ details: nextProps.details });

同时删除this.forceUpdate();，此处不需要forceUpdate。

第二个问题是defaultValue改为value：

<input type="text" value={this.state.details.id} />

以下是工作示例的链接：

https://stackblitz.com/edit/react-parent-child-prop

Answer 2

const NewDetailsView = ({details}) => (
  <div>
    <input type="text" value={details? details.id: null} />
  </div>
);

Answer 3

使用getDerivedStateFromProps而不是使用不推荐使用的componentWillReceiveProps。可以找到一个示例here

Answer 4

也许当我遇到这个问题时，在React v16.3.0中，某些方法成为旧版（不赞成使用），在此示例中，不使用此componentWillReceiveProps，现在称为UNSAFE_componentWillReceiveProps，可以借用通过错误和错误帮助您。

代替下面的示例：

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.someValue !== prevState.someValue) {
      return {
        someState: nextProps.someValue,
      };
    } else return null;
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.someValue !== this.props.someValue ) {
      this.setState({
        someState: this.props.someValue ,
      });
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是更新组件的正确方法。

参考：Replacing ‘componentWillReceiveProps’ with ‘getDerivedStateFromProps’

Answer 5

defaultValue仅适用于初始加载。您应该控制器输入并使用props来获取值（不需要setState）。

React Passing

反应传递新道具

5 个答案: