hook组件的props数组成员无法正常更新渲染
-
最简化demo:
https://github.com/zicjin/taro-test
使用标准项目新建流程。typescript,无css预处理。export default function Shelves(props) { const { specs = [] } = props // const specs = [{ // 'id': 482, // 'detail': [], // 'price': 30, // 'platformPrice': 10, // 'profit': 20, // 'marketPrice': 25, // 'stock': 480, // 'commissionRate': null // }] const [profits, setProfits] = useState(specs.map(s => ({ specId: s.id, profit: 0 }))) const setProfit = (e, i) => { profits[i].profit = +e.detail.value setProfits([...profits]) } return ( <View className='shelves' style={{ marginBottom: '100px' }}> {specs.map((s, i) => <View key={i}> <Input type='number' value={profits[i].profit} onInput={e => { setProfit(e, i) }} /> {/* confuse: 无法移除 toString() */} <View style={{ marginTop: '20px' }}>{profits[i].profit}</View> <View>{profits[i].profit.toString()}</View> </View>)} </View> ) }
当我更改input值,“profits[i].profit”无法正常更新。以下情况可正常更新:
- 加上toString()即可正常。
- 使用组件内部变量代替 props.specs 即可正常
- props.specs 更换为object,修改useState(specs.map... 即可正常
- 纯react应用也没有问题:https://codesandbox.io/s/jolly-wescoff-1y633?fontsize=14&hidenavigation=1