反应：空 useState 字符串

Question

我已经完成了这一页的大部分内容；我感觉很有成就感，即将记录我的进度的 .gif，我注意到 <input /> 标签在通过 onClick 继承后并不清楚它的价值。我需要 newEmail 在完成后为空，更多的是因为输入字段的价值看起来很清晰。

我一直在浪费大量时间尝试做应该是可以想象到的最简单的任务。有什么帮助吗？此外，如有任何关于其他方面的专业提示，我们将不胜感激。

function EmailSettings() {
    const [newEmail, setNewEmail] = useState("")

    const [addEmail, {
        data: addData,
        error: addErr
    }] = useMutation(ADD_EMAIL)

    useEffect(() => {
        if (addData && addData.addEmail) {
            if (addData.addEmail === true) {
                refetch()

                setNewEmail("")
                console.log(newEmail)

            } else {
                console.log(addErr)
            }
        }
    }, [addData])

    const onAddEmail = email => {
        addEmail({ variables: { input: { email: email } } })
    }
    return (

            <div className={styles.addEmail}>
                <div className={styles.desc}>Add email address</div>
                <input
                    type='email'
                    placeholder='Email address'
                    autoComplete="off"
                    className={styles.addInput}
                    onChange={e => setNewEmail(e.target.value)}
                />
                <button
                    className={styles.addBtn}
                    onClick={() => onAddEmail(newEmail)}
                >
                    Add
                </button>
            </div>

    )
}

Answer 1

我猜你正在使用 react-apollo。不能只调用 onCompleted 回调吗？

const [addEmail, {
        data: addData,
        error: addErr
    }] = useMutation(ADD_EMAIL, {
   onCompleted: () => setNewEmail('')
})

编辑：

将状态值添加到输入中。

<input value={newEmail} ... />

Answer 2

您可以将输入值设置为状态

<input
  type='email'
  placeholder='Email address'
  autoComplete="off"
  className={styles.addInput}
  onChange={e => setNewEmail(e.target.value)}
  value={newEmail}
/>

然后按照@Akiba 的建议将状态值设置为空字符串

const [addEmail, {
        data: addData,
        error: addErr
    }] = useMutation(ADD_EMAIL, {
   onCompleted: () => setNewEmail('')
})

反应：空 useState 字符串

React: empty useState string

reactjs

react-hooks

use-state