React Native 中的深拷贝数据更新问题

Question

我正在使用这个

    const HomeProfile = ({data}) =>{
    var tempData = {}
    
const onOptionClick = ( clicked_index) => {
    tempData = { ...data[0].atpData }
    tempData.selected_index = clicked_index
  }

const addInProps = () =>{
data[0].atpData=tempData
}

const checkData = () =>{
console.log('tempData',tempData)
}

    return(
    <View>
    <Text></Text>
    </View>
    )
    }

在 checkData 函数中检查数据时，它给我的是空数据。但是如果我使用这个钩子

const [tempData,settempData] = usestate({})

我的问题：它工作得很好，因为我将它与 var tempData = {} 一起使用，但在添加数据后出现问题。在 checkData() 函数中仍然得到空数据

如果我使用 const [tempData,settempData] = usestate({}) 则它会更改 data[0].atpData 中的数据而不会触发该函数，所以我不知道如何解决它。但我正在根据需要获取数据 checkData() 函数。

Answer 1

你应该使用 useState 钩子，所以你需要将它初始化为空对象，然后根据需要在你的方法中调用 setter:

const HomeProfile = ({data}) =>{
    const [tempData, setTempData] = useState({})
    
const onOptionClick = ( clicked_index) => {
    setTempData({...data[0].atpData, selected_index: clicked_index})

  }

const addInProps = () =>{
data[0].atpData=tempData
}

const checkData = () =>{
console.log('tempData',tempData)
}

    return(
    <View>
    <Text></Text>
    </View>
    )
    }

Answer 2

检测对象变化时可以使用useEffect hook

React Native 中的深拷贝数据更新问题

Deep copy data update problem in react native

javascript

hook

function

react-native