Android 处理子组件中的父状态_Android_Reactjs_React Native

Android 处理子组件中的父状态

android reactjs react-native

Android 处理子组件中的父状态,android,reactjs,react-native,Android,Reactjs,React Native,我需要在子组件中处理父组件的状态考虑以下代码： export default class App extends React.Component { state = { products: [ { id: 1, details: 'this is a macbook', image: require('./Images/macbook.jpg'), price: '1000$', },

我需要在子组件中处理父组件的状态

考虑以下代码：

export default class App extends React.Component {
  state = {
    products: [
      {
        id: 1,
        details: 'this is a macbook',
        image: require('./Images/macbook.jpg'),
        price: '1000$',
      },
      {
        id: 2,
        details: 'this is a PS4 pro',
        image: require('./Images/ps4pro.jpeg'),
        price: '500$',
      },
      {
        id: 3,
        details: 'this is a beats',
        image: require('./Images/beats.jpeg'),
        price: '200$',
      },
    ]
  }

  showProds = () => {
    let prods = [];
    for (let i = 0; i <= this.state.products.length - 1; i++) {
      prods.push(<Product key={this.state.products[i].id} id={this.state.products[i].id} details={this.state.products[i].details} img={this.state.products[i].image} />)
    }
    return prods;
  }

  delete = () => {
  //handle deleting a product
  }

  render() {
    return <ScrollView>
      {this.showProds()}
    </ScrollView>
  }
}

导出默认类App扩展React.Component{
状态={
产品：[
{
id:1，
详细信息：“这是一本macbook”，
图像：需要（'./Images/macbook.jpg'），
价格：'1000美元'，
},
{
id:2，
详情：“这是一款PS4 pro”，
图像：需要（'./Images/ps4pro.jpeg'），
价格：'500美元'，
},
{
id:3，
细节：“这是一个节拍”，
图像：需要（'./Images/beats.jpeg'），
价格：‘200元’，
},
]
}
showProds=（）=>{
设prods=[]；
for（设i=0；i{
//处理删除产品
}
render（）{
返回
{this.showProds（）}
}
}

正如您所看到的，这是我的主（父）组件，它的状态是一个示例产品数组，我对它们进行了循环以在屏幕上显示，这是我的产品组件：

const Product = (props) => {

    return (
        <View style={styles.card}>
            <View style={styles.prod}>
                <Text style={styles.prod_details}>{props.details}</Text>
                <Image style={styles.img} source={props.img} />
            </View>
            <View style={styles.btn}>
                <TouchableOpacity onPress={() => this.Delete()}> //my handler is here
                    <Text style={styles.btn_text}>Delete</Text>
                </TouchableOpacity>
            </View>
        </View >
    )
}

const产品=（道具）=>{
返回(
{props.details}
this.Delete（）}>//我的处理程序在这里
删除
)
}

我需要在TouchableOpacity元素中有我的处理程序（每个产品都有一个to处理程序），这样我就可以在delete函数中处理我的父状态。但是这样会导致

未定义不是一个对象错误
如何处理此问题？
您可以将函数引用传递给子元素，如下所示：
function passThis() {...}
<SomeElement onSomeEvent={passThis}>
//in an element
function SomeElement(props){
  return (
    <Element onEvent={props.onSomeEvent}/>
  )
}

//App.js
const App = () => {
    const [products, setProducts] = useState(someStartArray)
    const addProducts = (newItem) => setProducts(prev => [...prev, newItem])
    const delProducts = (delItem) => 
        setProducts(prev => prev.filter(item => item.id != delItem.id))
    
    return (
        <ScrollView>{
            products.map(item => (<Product {...item, delProducts} />)}
        </ScrollView>
    )
}
//Product.js
const Product = ({id, details, image, handleDelete}) => (
    <View style={styles.card}>
        <View style={styles.prod}>
           <Text style={styles.prod_details}>{details}</Text>
           <Image style={styles.img} source={img} />
        </View>
        <View style={styles.btn}>
           <TouchableOpacity onPress={handleDelete}> //your handler is here
               <Text style={styles.btn_text}>Delete</Text>
           </TouchableOpacity>
        </View>
    </View >
)

函数passThis（）{…}
//在一个元素中
功能元素（道具）{
返回(
)
}

另外，我建议您查看in-react，以及替代循环。
因此，您的组件将更出色，如下所示：
function passThis() {...}
<SomeElement onSomeEvent={passThis}>
//in an element
function SomeElement(props){
  return (
    <Element onEvent={props.onSomeEvent}/>
  )
}

//App.js
const App = () => {
    const [products, setProducts] = useState(someStartArray)
    const addProducts = (newItem) => setProducts(prev => [...prev, newItem])
    const delProducts = (delItem) => 
        setProducts(prev => prev.filter(item => item.id != delItem.id))
    
    return (
        <ScrollView>{
            products.map(item => (<Product {...item, delProducts} />)}
        </ScrollView>
    )
}
//Product.js
const Product = ({id, details, image, handleDelete}) => (
    <View style={styles.card}>
        <View style={styles.prod}>
           <Text style={styles.prod_details}>{details}</Text>
           <Image style={styles.img} source={img} />
        </View>
        <View style={styles.btn}>
           <TouchableOpacity onPress={handleDelete}> //your handler is here
               <Text style={styles.btn_text}>Delete</Text>
           </TouchableOpacity>
        </View>
    </View >
)

//App.js
常量应用=（）=>{
const[products，setProducts]=useState（someStartArray）
const addProducts=（newItem）=>setProducts（prev=>[…prev，newItem]）
const delProducts=（delItem）=>
setProducts（prev=>prev.filter（item=>item.id！=delItem.id））
返回(
{
products.map（项=>（）}
)
}
//Product.js
常量乘积=（{id，详细信息，图像，handleDelete}）=>(
{详细信息}
//你的经纪人来了
删除
)
您可以将函数引用传递给子元素，如下所示：
function passThis() {...}
<SomeElement onSomeEvent={passThis}>
//in an element
function SomeElement(props){
  return (
    <Element onEvent={props.onSomeEvent}/>
  )
}

//App.js
const App = () => {
    const [products, setProducts] = useState(someStartArray)
    const addProducts = (newItem) => setProducts(prev => [...prev, newItem])
    const delProducts = (delItem) => 
        setProducts(prev => prev.filter(item => item.id != delItem.id))
    
    return (
        <ScrollView>{
            products.map(item => (<Product {...item, delProducts} />)}
        </ScrollView>
    )
}
//Product.js
const Product = ({id, details, image, handleDelete}) => (
    <View style={styles.card}>
        <View style={styles.prod}>
           <Text style={styles.prod_details}>{details}</Text>
           <Image style={styles.img} source={img} />
        </View>
        <View style={styles.btn}>
           <TouchableOpacity onPress={handleDelete}> //your handler is here
               <Text style={styles.btn_text}>Delete</Text>
           </TouchableOpacity>
        </View>
    </View >
)

函数passThis（）{…}
//在一个元素中
功能元素（道具）{
返回(
)
}

另外，我建议您查看in-react，以及替代循环。
因此，您的组件将更出色，如下所示：
function passThis() {...}
<SomeElement onSomeEvent={passThis}>
//in an element
function SomeElement(props){
  return (
    <Element onEvent={props.onSomeEvent}/>
  )
}

//App.js
const App = () => {
    const [products, setProducts] = useState(someStartArray)
    const addProducts = (newItem) => setProducts(prev => [...prev, newItem])
    const delProducts = (delItem) => 
        setProducts(prev => prev.filter(item => item.id != delItem.id))
    
    return (
        <ScrollView>{
            products.map(item => (<Product {...item, delProducts} />)}
        </ScrollView>
    )
}
//Product.js
const Product = ({id, details, image, handleDelete}) => (
    <View style={styles.card}>
        <View style={styles.prod}>
           <Text style={styles.prod_details}>{details}</Text>
           <Image style={styles.img} source={img} />
        </View>
        <View style={styles.btn}>
           <TouchableOpacity onPress={handleDelete}> //your handler is here
               <Text style={styles.btn_text}>Delete</Text>
           </TouchableOpacity>
        </View>
    </View >
)

//App.js
常量应用=（）=>{
const[products，setProducts]=useState（someStartArray）
const addProducts=（newItem）=>setProducts（prev=>[…prev，newItem]）
const delProducts=（delItem）=>
setProducts（prev=>prev.filter（item=>item.id！=delItem.id））
返回(
{
products.map（项=>（）}
)
}
//Product.js
常量乘积=（{id，详细信息，图像，handleDelete}）=>(
{详细信息}
//你的经纪人来了
删除
)