javascript - React，使用该组件内的按钮删除组件

Question

我有一个动态渲染的组件，有自己的 key ，存储在对象数组中。 该组件有一个删除按钮，理想情况下可以从数组的键中删除该元素。 但我无法理解它。删除函数应该在容器中还是在组件中？我尝试了不同的方法，但似乎没有任何效果。 现在我有:

容器中的对象数组:

  const [weight, setWeight] = useState([{name: 34, value: "321iuiv51234"},{name: 38, value: "jkxdxb55s"}]);

以及动态渲染的组件，其中垃圾箱 img 应触发删除组件的函数。

import React from "react";
import "./Weight.css";
import trashbin from "../img/trash-bin.png";

const Weight = ({}) => {


  return (
    <div className="weight-box">
      <p>{weight} kg</p>
      <p></p>
      <img src={trashbin} alt="trash bin" className="trash-bin" />
    </div>
  );
};

export default Weight;

有什么想法吗？谢谢!

Answer 1

删除功能应该是容器的一部分，但触发事件应该来自Weight。

类似于

import React from "react"; 
import "./Weight.css"; 
import trashbin from "../img/trash-bin.png"; 

const Weight = ({delete, name, value}) => { 
  return (
    <div className="weight-box">
      <p>{name} kg</p>
      <p></p>
      <button onClick={() => delete(name)}><img src={trashbin} alt="trash bin" className="trash-bin" /></button>
    </div>
  ); 
}; 
export default Weight;

和

function Container(props) {

  const [weight, setWeight] = useState([{
    name: 34,
    value: "321iuiv51234"
  }, {
    name: 38,
    value: "jkxdxb55s"
  }]);

  const removeByName = useCalback((nameToDelete) => {
    setWeight(currentWeights => currentWeights.filter(({
      name
    }) => name !== nameToDelete));
  }, []);


  return (
    weight.map(w => <Weight delete={removeByName} { ...w} />)
    );
  }