您不应该使用 componentWillReceiveProps ，因为在最新版本中，'s UNSAFE and it won'适用于React的异步呈现 .

还有其他方法！

在初始装载和后续更新时，在调用render方法之前调用getDerivedStateFromProps . 它应返回一个对象来更新状态，或者返回null以不更新任何内容 .

所以在你的情况下

...component code

static getDerivedStateFromProps(props,state) {

if (this.props.cost == nextProps.cost) {

// null means no update to state

return null;

}

// return object to update the state

return { theData: this.props.cost };

}

... rest of code

您也可以使用memoization，但在您的情况下，由您决定 . The link has one example where you can achieve the same result with memoization and getDerivedStateFromProps

例如，在改变道具后更新列表(搜索)你可以从这里：

static getDerivedStateFromProps(props, state) {

// Re-run the filter whenever the list array or filter text change.

// Note we need to store prevPropsList and prevFilterText to detect changes.

if (

props.list !== state.prevPropsList ||

state.prevFilterText !== state.filterText

) {

return {

prevPropsList: props.list,

prevFilterText: state.filterText,

filteredList: props.list.filter(item => item.text.includes(state.filterText))

};

}

return null;

}

对此：

import memoize from "memoize-one";

class Example extends Component {

// State only needs to hold the current filter text value:

state = { filterText: "" };

// Re-run the filter whenever the list array or filter text changes:

filter = memoize(

(list, filterText) => list.filter(item => item.text.includes(filterText))

);

handleChange = event => {

this.setState({ filterText: event.target.value });

};

render() {

// Calculate the latest filtered list. If these arguments haven't changed

// since the last render, `memoize-one` will reuse the last return value.

const filteredList = this.filter(this.props.list, this.state.filterText);

return (

• {filteredList.map(item =>
• {item.text})}

);

}

}