【React Hooks】useState()でcannot assign to read only propertyが出た時の対処法
8929 ワード
はじめに
useState()でオブジェクトを管理していましたが、タイトルのようなエラーが発生したので、その解決法を記してあります。
エラー時のコード
test.js
import React, { useState, useEffect } from "react";
import { db } from "../firebase.js";
const Test = () => {
const [imgStyle, setImgStyle] = useState({backgroundImage: ""});
useEffect(() => {
db.collection("test").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
const docVal = doc.data();
imgStyle["backgroundImage"] = `url(${docVal.imgUrl})`;
setImgStyle(Object.assign({}, imgStyle));
});
}).catch(function(error) {
console.log("Error getting document:", error);
});
}, []);
return (
<div>
<div className="reportBefore" style={imgStyle}></div>
</div>
);
}
export default Test;
解決後のコード
test.js
import React, { useState, useEffect } from "react";
import { db } from "../firebase.js";
const Test = () => {
const [imgStyle, setImgStyle] = useState([]);
useEffect(() => {
db.collection("test").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
const docVal = doc.data();
setImgStyle(oldForm => [...oldForm,
{backgroundImage: `url(${docVal.imgUrl})`}
]);
});
}).catch(function(error) {
console.log("Error getting document:", error);
});
}, []);
return (
<div>
<div className="reportBefore" style={imgStyle[0]}></div>
</div>
);
}
export default Test;
まとめ
test.js
import React, { useState, useEffect } from "react";
import { db } from "../firebase.js";
const Test = () => {
const [imgStyle, setImgStyle] = useState({backgroundImage: ""});
useEffect(() => {
db.collection("test").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
const docVal = doc.data();
imgStyle["backgroundImage"] = `url(${docVal.imgUrl})`;
setImgStyle(Object.assign({}, imgStyle));
});
}).catch(function(error) {
console.log("Error getting document:", error);
});
}, []);
return (
<div>
<div className="reportBefore" style={imgStyle}></div>
</div>
);
}
export default Test;
test.js
import React, { useState, useEffect } from "react";
import { db } from "../firebase.js";
const Test = () => {
const [imgStyle, setImgStyle] = useState([]);
useEffect(() => {
db.collection("test").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
const docVal = doc.data();
setImgStyle(oldForm => [...oldForm,
{backgroundImage: `url(${docVal.imgUrl})`}
]);
});
}).catch(function(error) {
console.log("Error getting document:", error);
});
}, []);
return (
<div>
<div className="reportBefore" style={imgStyle[0]}></div>
</div>
);
}
export default Test;
まとめ
読みのみで変更はできないので、useStateでオブジェクトを扱う際は追加のイメージを忘れずに持っておくことが必要です。
Author And Source
この問題について(【React Hooks】useState()でcannot assign to read only propertyが出た時の対処法), 我々は、より多くの情報をここで見つけました https://qiita.com/marbow/items/bf6cc41303181ce3ce76著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .