私はReactを初めて使用し、練習用にフィードバックアプリに「削除ボタン」を作成しようとしています。フィードバックアプリのように見えるはずです。すべてのフィードバックのリストがあり、各フィードバックには削除ボタンがあります。すべてのフィードバックを正常に表示しています。それでも、現在、削除ボタンの周りにUncaught TypeErrorというエラーが表示されています。handleDeleteは関数ではなく、修正方法がわかりません。どうすればそれを機能させることができますか?

私のコードは次のとおりです: App.jsの場合

        import Header from './component/Header';
    import './App.css';
    import { useState } from 'react'
    import FeedbackData from './data/FeedbackData'
    import FeedbackList from './FeedbackList';

    function App() {
     const [feedBack , setFeedback] = useState(FeedbackData)

     const deleteFeedback = (id) => {
      if (window.confirm ('Are you sure you want to delet that?')){
        setFeedback (feedBack.filter((item) => item.id !== id ))
      }
    }
      return (
        <> 
        <Header />
        <div className="App">
        <FeedbackList item ={feedBack} handleDelete ={deleteFeedback}/>
        
        </div>
        </>
      );
    }
    export default App;

およびFeedbackList.jsの場合

  import React from "react";
import FeedbackItem from './component/FeedbackItem'

function FeedbackList( feedback , handleDelete ) {

    if (!feedback || feedback.length === 0) {
      return <p>there is no feedback</p>}
    
    return (
      <div className="feedback-list">
  
        {feedback.item.map((item) => (
          <FeedbackItem key={item.id} item ={item}
           handleDelete={handleDelete}
          />
        ))}
      </div>
    );
  }
  

export default FeedbackList;

およびFeedbackItem.jsの場合

    

import React from "react";
import Card from "./shared/Card";
import {FaTimes} from 'react-icons/fa'
function FeedbackItem( {item , handleDelete} ) {

    return (
      <Card>
        <div className="num-display">{item.rating}</div>
        <button  className="close" onClick={() => handleDelete(item.id)}>
            <FaTimes color="purple" />
        </button>
        <div className="text-display">{item.text}</div>
      </Card>
    );
  }
  

export default FeedbackItem;
応答

function FeedbackList( {feedback , handleDelete} ) {}

マーラ、FeedbackListの中かっこを忘れたかもしれません。

function FeedbackList( feedback , handleDelete ) { //old
function FeedbackList({ feedback , handleDelete }) {  // new, with braces

乾杯。

FeedbackList.jsを更新する

 import React from "react";
import FeedbackItem from './component/FeedbackItem'

function FeedbackList({ feedback , handleDelete} ) {

    if (!feedback || feedback.length === 0) {
      return <p>there is no feedback</p>}
    
    return (
      <div className="feedback-list">
  
        {feedback.item.map((item) => (
          <FeedbackItem key={item.id} item ={item}
           handleDelete={handleDelete}
          />
        ))}
      </div>
    );
  }
  

export default FeedbackList;

小道具をオブジェクトとして送信していませんでした。

FeedbackList コンポーネントはitem and handleDelete親から小道具として受け取るので、あなたがしたようにそれを分解することができます。

function FeedbackList({ feedback , handleDelete })
{ ... }

または

function FeedbackList(props) { 
const { feedback , handleDelete } = props
// also log and see what other things you get props
console.log(props)
{ ... }
}

または

function FeedbackList(props) { 
console.log(props.feedback)
console.log(props.handleDelete())
{ ... }
}