最简化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