将功能和数据从一个组件传递到另一个组件

Question

在我的 App.js 文件中

import Fruits from "./Fruits";
import FruitsCounter from "./FruitsCounter";
import React, {useState} from "react";

function App() {
  const [fruits, setFruits] = useState([
        {fruitName: 'apple', id: 1},
        {fruitName: 'apple', id: 2},
        {fruitName: 'plum', id: 3},
  ]);
  const handleClick = () => {
    setFruits = fruits.length - 1;
  }

  return (
    <div className="App">
      <h1>Where should the state go?</h1>
      <Fruits name={fruits} set={ handleClick}/>
      <FruitsCounter name={fruits} set={ handleClick}/>
    </div>
  );
}

export default App;

在 Fruits.js 中

import React from "react";

function Fruits(props) {
    

    return (
        <div>
            {props.name.map(f => <p key={f.id} onClick={props.set}>{f.fruitName}</p>)}
        </div>
    )
}

export default Fruits

在 FruitsCounter.js 组件中

function FruitsCounter(props) {
    return (
        <h2>Total fruits: {props.name.length}</h2>
    )
}

export default FruitsCounter;

通过单击水果名称，我想将计数器值减一。我怎样才能将 setFruits 从应用程序传递到计数器并使用它。

Answer 1

你在这里定义 setFruits 作为一个函数，可以更新 fruits & fruits 的值作为一个对象。

  const [fruits, setFruits] = useState([
        ...
  ]);

然后像这样传递给其他组件：

 <Fruits name={fruits} set={setFruits}/>

同时更换手柄。我不太确定你想在那里做什么，但应该是这样的。但我不认为它正在做你认为正在做的事情。

  const handleClick = () => {
  setFruits((fruits, props) => ({
  fruits: fruits.length-1;
}))  
}

使用之前的句柄，您将 setFruits 重新定义为与函数不同的东西。有了这个手柄，你只是在使用它。

一个更简单的使用 setFruits 的例子。

setFruits([...fruits, {fruitName: 'onion', id: 7} ])

检查https://reactjs.org/docs/handling-events.html并搜索

this.state 可能会异步更新，你不应该依赖它们 计算下一个状态的值

Answer 2

我猜您想在单击时从列表中删除水果。

  const [fruits, setFruits] = useState([
        {fruitName: 'apple', id: 1},
        {fruitName: 'apple', id: 2},
        {fruitName: 'plum', id: 3},
  ]);
  const removeFruit = (id) => {
    setFruits(currentFruits => {
       return currentFruits.filter(fruit => fruit.id !== id)
    })
  }
 return (
    <div className="App">
      ...
      <Fruits name={fruits} removeFruit={ handleClick}/>
      ...
    </div>
  );

然后在您的 Fruits 组件中，您可以调用注册一个 onClick 回调，该回调调用

removeFruit

以及您要删除的水果的 id。

<div>
      {props.name.map(fruit => (
        <p key={fruit.id} onClick={() => props.removeFruit(fruit.id)}>
          {fruit.fruitName}
        </p>
      ))}
</div>

顺便说一句：我建议您将组件的属性重命名为更有意义的名称：

- <Fruits name={fruits} set={ handleClick}/>
+ <Fruits fruits={fruits} onRemoveFruit={removeFruit}/>