Question

我的组件（材料UI TransferList）接收props.selectedItems作为以前选择的项目的数组。在props.Items中，我有所有可用的物品。

我希望在TransferList的左侧面板中看到props.selectedItems。但是，即使我只在其中放置了剩余的物品，左侧的面板还是空的，右侧的面板已经满了。

UPDATE `Chat`
SET `Text` = REGEXP_REPLACE(`Text`, '\<(.*?)\>', 'text inside <>');

当我尝试使用useEffect（from this question）时，它对我没有帮助：

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

另外，当我使用简单数组而不从props获取数组时，一切都完美运行！

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

...

这是怎么回事？）））

Answer 1

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));

...

Answer 2

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

...

材质UI TransferList不会使用useState从道具设置状态

2 个答案: