Tengo datos ficticios para pruebas de IU como se muestra a continuación
let sampleData = [ { name : "Banana", isFurit : true, volume: 0, }, { name : "book", isFurit : false, volume: 0, }, { name : "melon", isFurit : true, volume: 0, }, ]Quiero cambiar el valor de 'isFruit' cuando presiono el botón. pero no funciona quiero hacer que el texto cambie como Fruta <=> Cosas cuando hago clic en Touchbleopacity
{sampleData.map((data, index) => { const {name,isFruit,volume} = data return ( <View key={index}> <View> <Text style={[s.mediumFont]}>{name}</Text> </View> <View> <TextInput selectTextOnFocus={true} autoCapitalize={'none'} keyboardType={'numeric'} onChangeText={(text) => {volume = text}} value={volume ? volume.toString() : ''}/> <Text>{isFruit ? 'Fruit' : 'Things'}</Text> <TouchableOpacity onPress={(isFruit) => (!isFruit)}> <Image style={[s.icon24]} source=. {require('../../static/img/food/convert.png')}/> <Text>{!isFruit ? 'Fruit' : 'Things'}</Text> </TouchableOpacity> </View> <View> <TouchableOpacity onPress={() => this.addSelectedCustom()}> <Image style={[s.icon24]} source {require('../../static/img/food/cancel.png')}/> </TouchableOpacity> </View> </View> ) })}Aquí hay una solución de TypeScript para su problema. Es difícil dar una solución que funcione con su código, ya que no se proporcionó por completo. Uso HTMLElements genéricos ya que no estoy familiarizado con los componentes que está utilizando.
Además, sugeriría usar immutable.js para estructuras de datos inmutables, cuando trabaje con React. Por favor, eche un vistazo a esta página de la documentación de React.
Espero que esto haya ayudado.
const SomeComponent : React.FC = props => { const [sample, setSample] = useState([ { name : "Banana", isFruit : true, volume: 0, }, { name : "book", isFruit : false, volume: 0, }, { name : "melon", isFruit : true, volume: 0, }]) const toggleFruit = (isFruit : boolean, index : number) => { const newSample = [...sample] // a shallow copy occurs with the values of sample objects newSample[index] = { ...newSample[index] } // mutations occurring here newSample[index].isFruit = isFruit setSample(newSample) // trigger re-render } return <div> {sample.map((obj, i) => <button onClick = { () => toggleFruit(!obj.isFruit, i)} >{`${ obj.name } - ${ obj.isFruit }`}</button> )} </div> }