Question

我声明一个状态：

  const [list, setList] = useState([]);

然后我将它设置在 useEffect 中：

  useEffect(() => {

      axios
        .post("/myroute.json", { id: selectedHotel })
        .catch(function (error) {
          console.log(error);
        })
        .then((response) => {

          console.log("is updating photo list",response.data.photos)
          setThumbs(renderThumbs(response.data.photos))
          setList(response.data.photos)

        });
  }, [selectedHotel]);







  const onDragStart = (event) => {
    // We'll access the "data-position" attribute
    // of the current element dragged
    const initialPosition = Number(event.currentTarget.dataset.position);
  
    setDragAndDrop({
      // we spread the previous content
      // of the hook variable
      // so we don't override the properties 
      // not being updated
      ...dragAndDrop, 
  
      draggedFrom: initialPosition, // set the draggedFrom position
      isDragging: true, 
      originalOrder: list // store the current state of "list"
    });
  
    console.log("within OnDrag", event.currentTarget.dataset.position, dragAndDrop, list)


     ....
    
     }

我在 onDragStart 的控制台日志中看到，“列表”始终保持为 []，但我可以在 useEffect 的控制台日志中看到 response.data.photos 包含我想要设置的内容

OnDragStart 在这里使用：


    const renderThumbs = (files) => {
      return files.map((file, index) => 
     
        {
          return(
            <li data-position={index} style={thumb} key={file.id} draggable="true" onDragStart={(ev) => onDragStart(ev)}   onDragOver={(ev) => onDragOver(ev)}  onDrop={onDrop}>
            <div style={thumbInner}>
              <img
                src={file.url}
                style={img}
              />
            </div>
            <div style={thumbCloser} onClick={removeFile(file, files)}><Emoji symbol="❌" /></div>
          </li>
          )
        }
    
      );
    }

并且在use effect里面用来设置“thumbs”，用来渲染DOM中列表的组件

Answer 1

问题是由于闭包，因为您将拇指设置为在仅调用一次的 useEffect 内的状态内呈现，并将 onDragStart 事件处理程序分配给它，因此您实际上是在使用 {{1 }} 连同它的封闭闭包，当 useEffect 在组件的整个生命周期中被调用时。即使组件重新渲染，闭包也不会更新，因为它没有再次定义。

您必须做的不是存储要在 state 中呈现的内容，而是要用于呈现的数据

onDragStart

当我在函数中使用它时状态不更新

1 个答案: