在反应中传递和返回useState答案

【问题标题】：passing and returning useState in react在反应中传递和返回useState
【发布时间】：2021-02-09 15:56:01
【问题描述】：

是的，所以我正在尝试学习 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')
)

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

我想要做的是，当我单击按钮时，removeItem 函数将删除带有id 的所有项目并使用.filter。但我面临的问题是我似乎无法找到如何调用并将某些内容返回给setItems，以便我可以更改值。而且我找不到将setItem 传递给itemList.js 的方法。

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以将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
        )
      })}
    </>
  )
}

在孩子身上消耗掉道具。使用功能状态更新来访问前一个状态，过滤它并返回下一个状态。

function ItemList(props) {
  const { id, obj, setItems } = props; // <-- destructure from props

  const removeItem = (id) =>{
    setItems(items => items.filter(item => item.id !== id)) // <-- update state
  }

  return (
    <div>
      <h3>{id}</h3>
      <h4>{obj}</h4>           
      <button onClick={() => removeItem(id)}>Remove</button>
    </div>
  )
}

一般来说，虽然最好让拥有状态的组件也维护在该状态上运行的所有功能。换句话说，您应该在父级中定义removeHandler 并传递对它的引用。这允许并使其成为维护状态不变性的父组件的责任，而不是任何子组件的责任。

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

  const removeItem = (id) =>{
    setItems(items => items.filter(item => item.id !== id))
  }

  return (
    <>
      <h1>{items.length} Items in total</h1>
      {items.map((itemArr) => {
        return (
          <ItemList {...itemArr} removeItem={removeItem} />
        )
      })}
    </>
  )
}

function ItemList(props) {
  const { id, obj, removeItem } = props;

  return (
    <div>
      <h3>{id}</h3>
      <h4>{obj}</h4>           
      <button onClick={() => removeItem(id)}>Remove</button>
    </div>
  )
}

【讨论】：

【解决方案2】：

您需要将回调函数传递给从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);

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')
)

ItemList.js

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 中数据只能在一个方向传递，因此要从子组件更新父组件中的数据，您需要将函数作为 props 传递

【讨论】：