Reactjs 为什么“useState()”似乎不起作用?
我有一些需要动态生成的对象属性。该对象是Formik组件的initialValues对象 当我尝试在useEffect调用中更新FormValue时,它们似乎不起作用Reactjs 为什么“useState()”似乎不起作用?,reactjs,ecmascript-6,react-hooks,Reactjs,Ecmascript 6,React Hooks,我有一些需要动态生成的对象属性。该对象是Formik组件的initialValues对象 当我尝试在useEffect调用中更新FormValue时,它们似乎不起作用 useEffect(() => { async function getRoles() { let res try { res = await fetch(`http://localhost/roles?active=Yes`) } catch (err) {
useEffect(() => {
async function getRoles() {
let res
try {
res = await fetch(`http://localhost/roles?active=Yes`)
} catch (err) {
console.log('Err in getRoles', JSON.stringify(err))
}
const { rows } = await res.json()
console.log('rows: ' + JSON.stringify(rows))
setRoles(rows)
const possibleRoles = {}
rows.forEach((role, index) => {
const key = role.code.toLowerCase()
possibleRoles[key + '_reviewer'] = ''
})
console.log('formValues before: ' + JSON.stringify(formValues))
console.log('possibleRoles: ' + JSON.stringify(possibleRoles))
const newValues = { ...possibleRoles, ...formValues }
console.log('newValues: ' + JSON.stringify(newValues))
setFormValues({ ...newValues })
console.log('formValues after: ' + JSON.stringify(formValues))
}
getRoles()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []
)
// console results:
rows: [{"code":"aaa"},{"code":"bbb"},{"code":"ccc"}]
formValues before: {"formChoice":"","sectionChoices":[],"requestor":"dd","materials":""}
possibleRoles: {"aaa_reviewer":"","bbb_reviewer":"","ccc_reviewer":""}
newValues: {"aaa_reviewer":"","bbb_reviewer":"","ccc_reviewer":"","formChoice":"","sectionChoices":[],"requestor":"dd","materials":""}
formValues after: {"formChoice":"","sectionChoices":[],"requestor":"dd","materials":""}
我做错了什么?这是我的解构吗?尝试使用useEffect之类的东西
这将在初始渲染时进行
const [roles, setRoles] = useState([]);
useEffect(() => {
async function getRoles() {
let res
try {
res = await fetch(`http://localhost/roles?active=Yes`)
} catch (err) {
console.log('Err in getRoles', JSON.stringify(err))
}
const { rows } = await res.json()
console.log('rows: ' + JSON.stringify(rows))
setRoles(rows)
}
}, []);
现在只需观察另一个useEffect块中状态角色的变化
如果您的Formik状态已更新但未出现在浏览器中,请尝试启用Formik表单上的重新初始化道具。您会看到以前的状态,因为setState是异步的。当你想在useEffect中使用道具时,你必须设置依赖项,这样你就应该在[]中放入initialValues。如果我在[]中放入initialValues,我会得到一个可爱的无限循环。我曾假设setState上的等待将避免异步性质。尝试过同样的结果+无限循环,因为它会重新呈现Formik
useEffect(() => {
const possibleRoles = {}
roles.forEach((role, index) => {
const key = role.code.toLowerCase()
possibleRoles[key + '_reviewer'] = ''
})
console.log('formValues before: ' + JSON.stringify(formValues))
console.log('possibleRoles: ' + JSON.stringify(possibleRoles))
const newValues = { ...possibleRoles, ...formValues }
console.log('newValues: ' + JSON.stringify(newValues))
setFormValues({ ...newValues })
console.log('formValues after: ' + JSON.stringify(formValues))
}, [roles]);