子组件的状态值变为空

Question

我正在尝试使用状态从父组件向子组件发送信息。

在父组件中，我正在获取值并将其存储在名为 valueArray 的数组中。稍后，这个数组将存储在一个状态中，并通过子组件发送以映射和显示值。

1-) 下面的函数获取用户选择的值并将它们推入一个空数组 valueArray。

let valueArray = [];
    const getSelectedItem = (event) =>{

        if(valueArray.includes(item)){
            valueArray.splice(item.index,1);
           
        }else{
            valueArray.push(item);
        }
       
    }

2-) 在这里，用户选择完值后，onClick 将启动另一个将值存储在状态中的函数，该函数使用 valueArray 作为参数。

<button onClick={() => handleState(valueArray)}>Buton</button>

3-) 点击按钮后，handleState 函数执行并用valueArray 中的元素更新状态，values array goes to child组件进行映射和显示。

    const [values,setValues] = useState([]);
    const handleState = (arr) =>{
            setValues([...arr])     
    }

这里主要的问题是，选中后第一次点击button时，state变为空数组，子组件无法执行映射，因为valueArray的初始值为[] .第二次单击有效，状态随 valueArray 内的值发生变化。

Answer 1

像这样使用状态。

 const [valueArray, setValueArray] = [];
    const getSelectedItem = (event) =>{
    const array = [...valueArray]; 
        if(array.includes(item)){
            array.splice(item.index, 1);
            // setValueArray([...valueArray.filter((ite) => ite != item)]);
            setValueArray([...array]);
           
        }else{
            // valueArray.push(item);
             setValueArray([...array, item]); // instead of push we should use spread or concat()
        }
       
    }

子组件的状态值变为空

State value goes empty to child component

javascript

reactjs

react-state-management