使用 React Hooks 的条件答案

【问题标题】：Condition with React Hooks使用 React Hooks 的条件
【发布时间】：2020-06-11 19:13:25
【问题描述】：

如何在 React Hooks 中使用条件？我收到此错误：由于我的 {content}

，对象作为 React 子项无效

let content = favorit ? (
    <MaterialIcons
        style={styles.icon}
        name={'favorite'}
        size={33}
        color={'red'}
        onPress={() => {
            setFavorit(_delFromDB(lokal.id));
        }}
    />
) : (
    <MaterialIcons
        style={styles.icon}
        name={'favorite'}
        size={33}
        color={'red'}
        onPress={() => {
            setFavorit(_saveToDB(lokal.id));
        }}
    />
);

React.useLayoutEffect(() => {
    navigation.setOptions({
        headerRight: () => {
            return { content };
        },
    });
}, [navigation]);

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

这是因为在你的钩子中你返回了一个对象。

试试这个方法：

let HeaderRight = () => favorit ? (
    <MaterialIcons
        style={styles.icon}
        name={'favorite'}
        size={33}
        color={'red'}
        onPress={() => {
            setFavorit(_delFromDB(lokal.id));
        }}
    />
) : (
    <MaterialIcons
        style={styles.icon}
        name={'favorite'}
        size={33}
        color={'red'}
        onPress={() => {
            setFavorit(_saveToDB(lokal.id));
        }}
    />
);

React.useLayoutEffect(() => {
    navigation.setOptions({
        headerRight: () => <HeaderRight />,
    });
}, [navigation]);

【讨论】：

它有效，但为什么它不会导致重新渲染？ setFavorite 应该更新状态，因为我使用了 useState Hook const [favorit, setFavorit] = React.useState(false);
编辑您的原始帖子并添加完整的组件代码。我会努力解决问题。我目前没有关于您的组件如何工作的足够信息。
解决了一个新问题：stackoverflow.com/questions/62292565/…

【解决方案2】：

对象无效，因为 React 子错误可能意味着一些不同的事情出错了。例如，这可能是因为在 JSX 元素中呈现的项目是对象而不是基元（因此请确保您没有传递预期为基元的对象）。

如果没有其他方法，您可以尝试添加import 'core-js' 在项目的 index.js 文件中，第 1 行

【讨论】：