Javascript 物料UI传输列表未使用useState从道具设置状态

我的组件（材质UI）将props.selectedItems作为以前选择的项目数组接收。道具。道具我有所有可用的道具

我希望在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（）时，它对我没有帮助：

... // 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]);

...

此外，当我使用简单阵列而不使用道具时，一切都会完美地工作

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]          
  ...
  

---

发生了什么事

Material UI提供了关于如何使用组件的示例的有用文档。看看

下面我修改了他们关于如何使用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));

...

---

最终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]);

...

---

对不起，这无论如何都没用。结果还是一样的。”“left”是空的，“right”是满的，就像我从来没有使用过“not”功能一样。谢谢你。