javascript - 状态的功能被另一个状态破坏了？

Question

代码的功能和问题

在 useEffect Hook 中，我将 onClick 函数添加到 className imageContainer 的 div 中，无论何时使用该函数都会触发 saveStyle 函数。 saveStyle 函数的目标是改变元素的样式并添加到现有的图像数组状态 URL。 setImages Hook 没有任何原因不保存 URL。

我尝试解决这个问题:

由于状态的异步性质(例如使用 setTimeout)，我尝试稍等片刻，但它没有用。

我还发现，每当我删除称为 particularData 的状态设置并转换一点代码(在具有 id dataDisplay 的 div 中手动添加具有特定源代码的图像)时，saveStyle 函数的功能就可以完美运行。

有没有一种状态可以阻止另一种状态的可能性？我搜索了一下，发现一个状态可能会因过多的数据而过载，并且会阻止另一个状态的功能，但我尽可能多地编辑了传递给第一状态(特定数据)的数据，只是为了不阻止第二个状态(图像)，但它也不起作用。

const DataDisplay = (props) =>  {
    const [images, setImages] = useState([]);
    const [particularData, setParticularData] = useState([]);

    const saveStyle = (element) => {
        
        const parentOfElement = element.target.parentNode;
        const image = parentOfElement.children[0];

        image.style.animation = "rotation 1s forwards";

        const backgroundDiv = parentOfElement.children[1];

        backgroundDiv.style.animation = "disappear 1s forwards";

        const questionMark = parentOfElement.children[2];

        questionMark.style.animation = "disappear 0.2s forwards";
        setImages([...images, image.src]);
        checkSimilarity();
    }

    const checkSimilarity = () => {
        console.log(images);
    }


    useEffect(() => {

        const dataArray = [...props.data, ...props.data];
        
        const preparedData = dataArray.map((item, index) => {
            return ( <div className="imageContainer" onClick={(element) => saveStyle(element)}>
                        <img className="photo photographyPart" alt={item.alt} src={item.link}></img>
                        <div className="backgroundDiv photographyPart"></div>
                        <img className="askSign photographyPart" src={sign} alt="Question mark" ></img>
                    </div> )
        });
        console.log(preparedData);
        setParticularData(preparedData);
    }, [ props ]);

    return (
        <div id="container">
            <div id="top"></div>
            <div id="left-side"></div>
            <div id="dataDisplay">{particularData}</div>
            <div id="right-side"></div>
            <div id="bottom"></div>
        </div>
    )
}

Answer 1

console.log(images); 中的 saveStyle 不会注意到更改，因为 setImages 将排队更新以在 saveStyle 完成后运行。如果您将 console.log(images); 从 saveStyle 移到 DataDisplay 的主要部分，您应该能够更好地看到发生了什么。

saveStyle 中的图像可能是 stale closure如果是这样，您可以使用 functional update 修复它用于设置图像调用。

例如

setImages(prevImages => [...prevImages, image.src]);

const DataDisplay = (props) =>  {
  const [images, setImages] = React.useState([]);
  const [particularData, setParticularData] = React.useState([]);
  
  console.log(images);
  
  const saveStyle = (element) => {
    const parentOfElement = element.target.parentNode;
    const image = parentOfElement.children[0];

    image.style.animation = "rotation 1s forwards";

    const backgroundDiv = parentOfElement.children[1];

    backgroundDiv.style.animation = "disappear 1s forwards";

    const questionMark = parentOfElement.children[2];

    questionMark.style.animation = "disappear 0.2s forwards";
    setImages(prevImages => [...prevImages, image.src]);
  };

  React.useEffect(() => {
    const dataArray = [...props.data];

    const preparedData = dataArray.map((item, index) => {
      return ( <div key={item.src} className="imageContainer" onClick={(element) => saveStyle(element)}>
        <img className="photo photographyPart" alt={item.alt} src={item.link}></img>
        <div className="backgroundDiv photographyPart"></div>
        <img className="askSign photographyPart" src={item.src} alt="Question mark" ></img>
      </div> );
    });
    // console.log(preparedData);
    setParticularData(preparedData);
  }, [ props ]);

  return (
    <div id="container">
      <div id="top"></div>
      <div id="left-side"></div>
      <div id="dataDisplay">{particularData}</div>
      <div id="right-side"></div>
      <div id="bottom"></div>
    </div>
  );
}

const App = () => {
  return <DataDisplay
    data={[
      { alt: 'a', link: '#1', src: 'src1' },
      { alt: 'b', link: '#2', src: 'src2' },
      { alt: 'c', link: '#3', src: 'src3' },
    ]}
  />;
};

ReactDOM.render(<App />, document.getElementById('root'));

.imageContainer {
  display: inline-block;
  margin-right: 10px;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>