Material UI TransferList не устанавливает состояние из реквизита с useState

Мой компонент (UI материала TransferList) получает props.selectedItems как массив ранее выбранных Предметы. И в props.Items у меня есть все доступные предметы.

Я ожидаю увидеть props.selectedItems на левой панели TransferList. Однако левая панель пуста, а правая - заполнена, хотя я поместил туда только оставшиеся элементы.

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

Что здесь происходит? )))


reactjs javascript material-ui use-state use-effect
person Lissa    schedule 27.10.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В Material-UI есть полезная документация с примерами использования компонентов. Взгляните на пример простого списка передачи 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));

...
person ReedAnders    schedule 27.10.2020
comment
Извините, это все равно не помогает. Результат все тот же. «left» пусто, «right» заполнено, как будто я никогда не выполнял функцию «not». В любом случае спасибо. - person Lissa; 27.10.2020

arrow_upward
0
arrow_downward

В конце концов 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]);

...
person Lissa    schedule 27.10.2020