reactjs - 在反应中传递和返回useState

Question

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

基本上我要做的是使用一个文件中的 useState 并让它通过另一个文件上的 onClick 函数进行更改，如下所示：

列表.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')
)

项目列表.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

Answer 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>
  )
}