如何從 React JS 上的可傳遞道具克隆數據

Question

我在 React.JS 中創建一個 Multi Dropdown 組件，我想從 App.js 克隆一個變量（selectedData）到一個組件中。 但是當我嘗試克隆數據時總是出現錯誤“無法分配給對象的只讀屬性‘selectedData’”

import React from 'react';
import MultiDropdown from './Components/MultiDropdown/MultiDropdown.component';
import { allOptions } from './Utils/DummyData';
import "./App.css";

const App = () => {
  var clonedData = [
    { value: 'Normal😐', label: 'Normal😐' },
    { value: 'Angry😡', label: 'Angry😡' },
    { value: 'Love😍', label: 'Love😍' },
  ]
  return(
    <div className='app'>
      <MultiDropdown 
        data={allOptions} 
        placeholder="Select Options"
        selectedData={clonedData}
        // value={clonedData}
      />
      <button onClick={() => console.log("Selected", clonedData)}>Click to See SelectedData</button>
    </div>
  )
}
  

export default App;

我想克隆傳遞給 selectedData 的變量 CloneData，我使用這個 function 來克隆數據

這是我的組件代碼：

export default function MultiDropdown(props: Props): React.Node {
  const [data, setData] = React.useState(props.selectedData ? props.selectedData.map(opt => opt.value) : []);
  React.useEffect(() => {
    props.selectedData = data;
  }, [data, props]);
  return (
    <div>
      <Select
        ref={props.selectedData}
        {...DropDownProps(props, data, SelectOption)}
        onChange={selected => setData(selected.map(opt => opt.value))}
      />
      {data.map(opt => (<ListContainer key={opt} opt={opt} data={data} set={setData} />))}
    </div>
  );
}

我正在嘗試在 useEffect 上克隆我的變量

感謝你們！

Answer 1

您不能直接更改組件中的道具，但有一種方法：

您可以創建一個useState來存儲您的clonedData傳遞 state 和更改 state 的 function。

import React from 'react';
import MultiDropdown from './Components/MultiDropdown/MultiDropdown.component';
import { allOptions } from './Utils/DummyData';
import "./App.css";

const App = () => {
  const [clonedData , setClonedData] = React.useState([
    { value: 'Normal😐', label: 'Normal😐' },
    { value: 'Angry😡', label: 'Angry😡' },
    { value: 'Love😍', label: 'Love😍' },
  ]);
  
  return(
    <div className='app'>
      <MultiDropdown 
        data={allOptions} 
        placeholder="Select Options"
        selectedData={clonedData}
        changeSelectedData={setClonedData} // pass the setter function.
        // value={clonedData}
      />
      <button onClick={() => console.log("Selected", clonedData)}>Click to See SelectedData</button>
    </div>
  )
}
  

export default App;

然后使用這個useState鈎子而不是在組件中定義它。 因為沒有辦法直接將子組件中定義的任何東西傳遞給父組件