Reactjs 在react中传递和返回useState

是的，所以我正在努力学习react，我正在做一个简单的项目来更好地理解它

基本上，我试图从一个文件中使用useState，并通过另一个文件上的onClick函数对其进行更改，如下所示：

list.js

export const List= [
{id:1, obj:'item1'},
{id:2, obj:'item2'},
{id:3, obj:'item3'},
{id:4, obj:'item4'},] ;

index.js

import React,{useState} from 'react'
import {List} from './list'
import ItemList from './ItemList'
function Items(){
      const [items,setItems] = React.useState(List);
return (
    <>
        <h1>{items.length} Items in total</h1>
        {items.map((itemArr)=>{
       
            return (
                <ItemList {...itemArr}/>
                
            )
        })}

    </>   
)
    }
    ReactDom.render(<Items />,document.getElementById('root')
)

import React,{useState} from 'react'
import {List} from './list'
import ItemList from './ItemList'
function Items(){
      const [items,setItems] = React.useState(List);

onClickHandler(id){
   .... 
    change state
   ....
}
return (
    <>
        <h1>{items.length} Items in total</h1>
        {items.map((itemArr)=>{
       
            return (
                <ItemList onClickHandler={onClickHandler} {...itemArr}/>
                
            )
        })}

    </>   
)
    }
    ReactDom.render(<Items />,document.getElementById('root')
)

import React，{useState}来自“React”
从“/List”导入{List}
从“./ItemList”导入ItemList
功能项（）{
const[items，setItems]=React.useState（列表）；
返回(
{items.length}共有个项目
{items.map（（itemArr）=>{
返回(
)
})}
)
}
ReactDom.render（，document.getElementById（'root'））
)

ItemList.js

import React from 'react'

function ItemList(props) {
    const {id,obj} = props;
    const removeItem = (id) =>{
     //Code Here
    }
    return (
       <div>
            <h3>{id}</h3>
            <h4>{obj}</h4>           
            <button onClick={()=> removeItem(id)}>Remove</button>
        </div>
    )
}
export default ItemList

import React from 'react'

function ItemList(props) {
    const {id,obj,onClickHandler} = props;
    return (
       <div>
            <h3>{id}</h3>
            <h4>{obj}</h4>           
            <button onClick={()=> onClickHandler(id)}>Remove</button>
        </div>
    )
}
export default ItemList

从“React”导入React
功能项目列表（道具）{
const{id，obj}=props；
const removietem=（id）=>{
//代码在这里
}
返回(
{id}
{obj}
removeItem（id）}>Remove
)
}
导出默认项目列表

---

我想做的是，当我单击按钮时，

removietem

功能将删除带有

id

的任何项目，并使用

.filter

。但我面临的问题是，我似乎无法找到如何调用并将某些内容返回到

setItems

，以便更改值。我找不到将

setItem

传递到

itemList.js

的方法，您需要将回调函数传递到from

Items

组件到

itemList

组件

index.js

import React,{useState} from 'react'
import {List} from './list'
import ItemList from './ItemList'
function Items(){
      const [items,setItems] = React.useState(List);
return (
    <>
        <h1>{items.length} Items in total</h1>
        {items.map((itemArr)=>{
       
            return (
                <ItemList {...itemArr}/>
                
            )
        })}

    </>   
)
    }
    ReactDom.render(<Items />,document.getElementById('root')
)

import React,{useState} from 'react'
import {List} from './list'
import ItemList from './ItemList'
function Items(){
      const [items,setItems] = React.useState(List);

onClickHandler(id){
   .... 
    change state
   ....
}
return (
    <>
        <h1>{items.length} Items in total</h1>
        {items.map((itemArr)=>{
       
            return (
                <ItemList onClickHandler={onClickHandler} {...itemArr}/>
                
            )
        })}

    </>   
)
    }
    ReactDom.render(<Items />,document.getElementById('root')
)

import React，{useState}来自“React”
从“/List”导入{List}
从“./ItemList”导入ItemList
功能项（）{
const[items，setItems]=React.useState（列表）；
onClickHandler（id）{
.... 
改变状态
....
}
返回(
{items.length}共有个项目
{items.map（（itemArr）=>{
返回(
)
})}
)
}
ReactDom.render（，document.getElementById（'root'））
)

ItemList.js

import React from 'react'

function ItemList(props) {
    const {id,obj} = props;
    const removeItem = (id) =>{
     //Code Here
    }
    return (
       <div>
            <h3>{id}</h3>
            <h4>{obj}</h4>           
            <button onClick={()=> removeItem(id)}>Remove</button>
        </div>
    )
}
export default ItemList

import React from 'react'

function ItemList(props) {
    const {id,obj,onClickHandler} = props;
    return (
       <div>
            <h3>{id}</h3>
            <h4>{obj}</h4>           
            <button onClick={()=> onClickHandler(id)}>Remove</button>
        </div>
    )
}
export default ItemList

从“React”导入React
功能项目列表（道具）{
const{id，obj，onClickHandler}=props；
返回(
{id}
{obj}
onClickHandler（id）}>删除
)
}
导出默认项目列表

---

在React中，数据只能沿一个方向传递，因此要从子组件更新父组件中的数据，您需要将函数作为道具传递

您可以将

setItems

作为道具传递到

ItemList

function Items(){
  const [items,setItems] = React.useState(List);

  return (
    <>
      <h1>{items.length} Items in total</h1>
      {items.map((itemArr) => {
        return (
          <ItemList {...itemArr} setItems={setItems} /> // <-- pass callback
        )
      })}
    </>
  )
}