Material UI TransferList 不使用 useState 从道具设置状态

Question

我的组件（Material UI TransferList）接收 props.selectedItems 作为先前选择的项目的数组。在 props.Items 我有所有可用的项目。

我希望在 TransferList 的左侧面板中看到 props.selectedItems。但是，左侧面板是空的，右侧面板是满的，即使我只放了剩余的项目。

function TransferList(props) {
  // props.items = [0,1,2,3,4,5,6,7]
  console.log(props.selectedItems);    //  [2, 6]
  let remainingItems = not(props.items, props.selectedItems);  
  console.log(remainingItems);         //  [0,1,3,4,5,7] 
  const [checked, setChecked] = useState([]);
  const [right, setRight] = useState(remainingItems);
  const [left, setLeft] = useState(props.selectedItems);
  console.log(right);                  //  [0,1,2,3,4,5,6,7]     ?????????????????????????!!!!!!!!!!!!
  console.log(remainingItems);         //  [0,1,3,4,5,7] 
  console.log(left);                   //  []                    ?????????????????????????!!!!!!!!!!!!
  ...
  

当我尝试 useEffect (from this question) 时，它并没有帮助我：

... // the same code above

useEffect(() => {    
    let remainingItems = not(props.items, props.selectedItems);
    setRight(remainingItems);
    setLeft(selectedItems);
    console.log(right);                    //  [0,1,2,3,4,5,6,7]     ?????????????????????????!!!!!!!!!!!!
    console.log(remainingItems);         //  [0,1,3,4,5,7] 
    console.log(left);                     //  []                    ?????????????????????????!!!!!!!!!!!!
  }, [props.items, props.selectedItems]);

...

另外，当我使用简单数组而不从 props 获取它时，一切正常！

function TransferList(props) {
  items = [0,1,2,3,4,5,6,7];
  selectedItems=[2,6];
  let remainingItems = not(items, selectedItems);  
  console.log(remainingItems);         //  [0,1,3,4,5,7] 
  const [checked, setChecked] = useState([]);
  const [right, setRight] = useState(remainingItems);
  const [left, setLeft] = useState(selectedItems);
  console.log(right);                  //  [0,1,3,4,5,7]     
  console.log(remainingItems);         //  [0,1,3,4,5,7] 
  console.log(left);                   //  [2,6]          
  ...
  

发生了什么事？ )))

Answer 1

最终 useEffect 在没有 props.items 的情况下工作，我想这是因为 props.items 不会改变，而 props.selectedItems 会。 我把代码留在这里。

... 

    useEffect(() => {    
        let remainingItems = not(props.items, props.selectedItems);
        setRight(remainingItems);
        setLeft(selectedItems);
        console.log(right);                    //  [0,1,2,3,4,5,6,7]     ?????????????????????????!!!!!!!!!!!!
        console.log(remainingItems);         //  [0,1,3,4,5,7] 
        console.log(left);                     //  []                    ?????????????????????????!!!!!!!!!!!!
      }, [props.selectedItems]);

...

Answer 2

Material-UI 包含有用的文档以及如何使用组件的示例。看看Material-UI Simple Transfer List Example

下面我修改了他们关于如何使用 TransferList 的文档。这应该可以帮助您着手解决问题。

...

export default function TransferList(props) {
  const classes = useStyles();
  const [checked, setChecked] = React.useState([]);
  const [left, setLeft] = React.useState(props.selectedItems);
  const [right, setRight] = React.useState(not(props.Items, props.selectedItems));

...