如何在useEffect hook中使用function參數

Question

我有點擊事件監聽器，我正在接收數據參數。 在這個 function 內部，我正在設置 state。 現在我正在嘗試根據當前的 state 更改 state ，我需要useEffect來實現這一點。 但我不知道如何在其中使用 function 數據參數。 這是代碼：

import React from 'react';

const MyApp = () => {
   const [state, setState] = React.useState([]);
   const arr1 = [
      {id: 1, name: 'Daryl'},
      {id: 2, name: 'Negan'},
   ];

   const clickHandler = (data) => {
       const newData = arr1.filter(item => item.name === data.name); // some data i wan't to use in useEffect
       setState(newData);
   };

   React.useEffect(() => {
       if(state.indexOf(newData[0]) !== -1) { // how to use this here?
           //rest of the code
       }
   }, [state]);
}

Answer 1

您不需要直接使用newData因為您將其值設置為state

只需以這種方式更改您的組件：

import React from 'react';

const MyApp = () => {
   const [state, setState] = React.useState([]);
   const arr1 = [
      {id: 1, name: 'Daryl'},
      {id: 2, name: 'Negan'},
   ];

   const clickHandler = (data) => {
       const newData = arr1.filter(item => item.name === data.name); // some data i wan't to use in useEffect
       setState(newData);
   };

   React.useEffect(() => {
       if(state.length) { // if state array have length then its value are newData
           //rest of the code
       }
   }, [state]);
}

Answer 2

由於您希望在過濾后從更新的 state 中添加或刪除項目，因此您可以在實際更新 state 之前執行此操作，您不需要 useEffect 來實際等待 Z9ED39E2EA931586B6A985A6942EF7 更新之前執行操作

const MyApp = () => {
   const [state, setState] = React.useState([]);
   const arr1 = [
      {id: 1, name: 'Daryl'},
      {id: 2, name: 'Negan'},
   ];

   const clickHandler = (data) => {
       const newData = arr1.filter(item => item.name === data.name); // some data i wan't to use in useEffect
       // What ever you want to do, you can operate on newData and then finally set updated data to state
       setState(newData);
   };

}