从map函数中获取值，而不需要重新渲染太多的useState React

Question

我有一个问题，从映射函数返回值。当我从useState设置状态时，它会重新渲染。

const [getPrice, setPrice] = useState([]);
recordProcedures.map((item) => (
item.chosen != null ?
item.chosen.map((proc) =>(
console.log('Inner Map:',proc),
console.log('Procedure:',proc.procedure),
console.log('Price:',proc.price)
))
: null
))

这就是console.log的样子console.log预览

现在如果我像这样设置一个状态

const [getPrice, setPrice] = useState([]);
recordProcedures.map((item) => (
item.chosen != null ?
item.chosen.map((proc) =>(
console.log('Inner Map:',proc),
console.log('Procedure:',proc.procedure),
console.log('Price:',proc.price)
setPrice(proc.price)
))
: null
))

它多次呈现并得到一个错误console.log(getPrice)如何在不重新渲染

的情况下返回/获取map函数中的值?

Answer 1

钩子只能在函数组件的内部调用。你不能直接调用setState。改为使用useEffect

useEffect(()=>{
const price = recordProcedures?.map((item) => (
item.chosen?.map((proc) =>proc.price)
))
setPrice(price)
}, [recordProcedures])