Javascript 状态的功能被另一个状态破坏？

代码的功能和问题

在useEffect钩子中，我将其添加到className imageContainer onClick函数的div中，只要使用该函数，就会触发saveStyle函数。saveStyle函数的目标是更改元素的样式，并将图像的URL添加到现有数组状态。没有任何理由setImages钩子不会保存URL

我解决此问题的尝试：

由于状态的异步性质，例如使用setTimeout，我尝试等待一点，但它不起作用

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

我还发现，每当我删除名为SpecialData的状态设置并转换一点代码（使用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>
    )
}

constdatadisplay=（道具）=>{
const[images，setImages]=useState（[]）；
const[specificulardata，setspecificulardata]=useState（[]）；
常量保存样式=（元素）=>{
const parentOfElement=element.target.parentNode；
const image=parentOfElement.children[0]；
image.style.animation=“向前旋转1s”；
const backgroundDiv=parentOfElement.children[1]；
backgroundDiv.style.animation=“消失1s向前”；
常量问号=元素的父元素。子元素[2]；
questionMark.style.animation=“向前消失0.2秒”；
setImages（[…images，image.src]）；
检查相似性（）；
}
常量检查相似度=（）=>{
控制台日志（图像）；
}
useffect（（）=>{
const dataArray=[…props.data，…props.data]；
const preparedData=dataArray.map（（项，索引）=>{
返回（保存样式（元素）}>
)
});
控制台日志（准备数据）；
设置特定数据（准备数据）；
}[道具]；
返回(
{specificulardata}
)
}

console.log（图像）不会注意到更改，因为setImages将在saveStyle完成后对要运行的更新进行排队。如果移动
console.log（图像）脱离保存样式进入数据显示的主要部分，您应该能够更好地看到发生了什么

saveStyle中的图像可能是一个。如果是这样，您可以使用set images调用的来修复它

e、 g


constdatadisplay=（道具）=>{
const[images，setImages]=React.useState（[]）；
常量[specificulardata，setspecificulardata]=React.useState（[]）；
控制台日志（图像）；
常量保存样式=（元素）=>{
const parentOfElement=element.target.parentNode；
const image=parentOfElement.children[0]；
image.style.animation=“向前旋转1s”；
const backgroundDiv=parentOfElement.children[1]；
backgroundDiv.style.animation=“消失1s向前”；
常量问号=元素的父元素。子元素[2]；
questionMark.style.animation=“向前消失0.2秒”；
setImages（prevImages=>[…prevImages，image.src]）；
};
React.useffect（（）=>{
constdataarray=[…props.data]；
const preparedData=dataArray.map（（项，索引）=>{
返回（保存样式（元素）}>
);
});
//控制台日志（准备数据）；
设置特定数据（准备数据）；
}[道具]；
返回(
{specificulardata}
);
}
常量应用=（）=>{
返回；
};
ReactDOM.render（，document.getElementById（'root'））
.imageContainer{
显示：内联块；
右边距：10px；
}

你对useEffect的依赖性
[props]
不是一个好主意。为什么不是一个好主意呢。我之所以使用它，是因为每当来自上层组件的异步请求的数据到达时，我需要重新提交我的组件。有更好的方法吗？我没有提到，但我试过了，但没有效果。我知道我有可能看不到结果，因为console.log放在saveStyle函数中，但问题是，当我第二次、第三次、第四次调用它时，它也不会显示任何状态更改。@BqZz请查看我的编辑，以及我提到的两个更改，看起来状态正在更新。它可以正常工作，但您能解释一下，当我在saveStyle函数中调用images数组时，它为什么没有console.log值吗？@BqZz我想我在回答中提到了两个重要因素。最重要的是陈旧的结尾，如果你还没有读过的话，我建议你仔细阅读。但saveStyle函数看到的images变量的版本基本上被锁定为创建该函数时的状态。（我想）。在这种情况下，它总是
[]
。