ComponentWillMount 警告答案

【问题标题】：ComponentWillMount warningComponentWillMount 警告
【发布时间】：2018-03-07 13:20:19
【问题描述】：

我正在创建一个内部布局。我正在从另一个场景进入这个场景。因此，在开始时会呈现另一个布局。在我进入第二个场景（带有 TextInput 标签）后，我收到警告，例如：

componentWillMount 已弃用，将在下一个版本中删除主要版本。请改用 componentDidMount。作为临时解决方法，您可以重命名为 UNSAFE_componentWillMount。请更新以下组件：App、Container、Image、Text

这很奇怪，因为我没有使用componentWillMount方法，所以我猜它是隐式调用的。

这是组件的代码

 class MainTopBarAfterSearch extends Component {
constructor() {
    super();
    this.state = { text: " " };
}

render() {
    const { topBarContainer, imageStyle, textInputStyle } = styles;
    return (
        <View style={topBarContainer}>
            <TouchableOpacity onPress={() => Actions.menu()}>
                <Image
                    source={require("../../../resources/menuWhite.png")}
                />
            </TouchableOpacity>
            <TextInput
                style={textInputStyle}
                placeholder="Begin to search"
                value={this.state.text}
                onChangeText={text => this.setState({ text })}
            />
            <Image source={require("../../../resources/filter.png")} />
        </View>
    );
}
}

【问题讨论】：

你用的是哪个版本的 react？
"react": "^16.3.0-alpha.1", "react-native": "0.54.0",
Here 看看这个

标签： reactjs react-native react-native-router-flux

【解决方案1】：

是的，因为 componentWillMount 和 componentWillReceiveProps 在 React 中很快就会被弃用。我建议你使用componentDidMount 而不是componentWillMount。

但是您仍然会收到那些黄色框警告，因为 react-native 仍在将这些用于内部组件，例如 Image、TouchableOpacity 和许多其他组件。我们需要等待新的更新来消除这些警告。别担心，快乐编码。

【讨论】：

【解决方案2】：

我认为，componentWillMount 的引用在 Component 类实现中。不在扩展中。

【讨论】：

【解决方案3】：

这是因为 componentWillMount 将在下一个主要版本中很快被弃用。即使您不使用它，收到此警告也是为了阻止您使用它，因为它是我们常用的生命周期的一部分.

【讨论】：

【解决方案4】：

ComponentWillMount 在版本 16 的 react 中已弃用。您应该将所有代码从 componentWillMount 移动到构造函数或 componentDidMount。

更多解释请参考以下链接。 https://reactjs.org/docs/react-component.html#componentwillmount

【讨论】：

OP 明确表示他们没有直接调用 componentWillMount。

【解决方案5】：

componentWillMount 可以通过构造函数初始化或可能使用 componentDidMount

轻松修复

它对我有用:)

【讨论】：