使用ReactJS功能组件中的props初始化状态时出现问题

Question

我使用React功能组件，并根据prop值初始化状态值。但主要的问题是，在重新渲染状态没有更新基于道具的值之后，它在重新渲染后给了我旧的值。

我有两个组件，第一个是问题组件(父组件(，第二个是书签组件(子组件(。

在问题组件中，我正在获取数据并在State中传递该数据。

计时器组件每隔30秒更改currentQuestion状态的值。

定时器组件工作正常，这就是为什么我没有在这里包含代码

我正在渲染书签组件问题ID和isBookmarked道具为默认值false值

问题解释

书签切换工作正常。

但当30秒结束时，书签应该重置为其道具值，而这并没有发生。问题结束后，我得到了旧的状态值。我已经检查过我在道具中获得了新的值，但状态在书签组件中不能正常工作。

问题.jsx(父组件(

function Question({ t, data, timerSeconds }) {
const [questions, setQuestions] = useState(data);
const [currentQuestion, setCurrentQuestion] = useState(0);
const child = useRef(null);
setTimeout(() => {
setQuestions(data);
}, 500)
const setNextQuestion = () => {
const nextQuestion = currentQuestion + 1;
if (nextQuestion < questions.length) {
setCurrentQuestion(nextQuestion);
child.current.resetTimer();
}
}
const onTimerExpire = () => {
setNextQuestion();
}
return (
<React.Fragment>
<div className="inner__headerdash">
<div className="leveldata">
<h6 className="inner-level__data">{t('level')} : {questions[currentQuestion].level}</h6>
</div>
<Timer ref={child} timerSeconds=30 onTimerExpire={onTimerExpire} />
<div className="total__out__leveldata">
<span className="inner__total-leveldata">{currentQuestion + 1} | {questions.length}</span>
</div>
</div>
<div className="text-white bookmark_area" >
<Bookmark id={questions[currentQuestion].id} isBookmarked={false} />
</div>
</React.Fragment>
)
}
export default Question;

Bookmark.jsx(子组件(

function Bookmark({ id, isBookmarked, onClick }) {
const [bookmark, setBookmark] = useState(isBookmarked);

const handleClick = (question_id) => {
var toggleBookmarkState = !bookmark;
setBookmark(toggleBookmarkState);
onClick(question_id, toggleBookmarkState);
}
return (
<button className="btn bookmark_btn" onClick={() => handleClick(id)}>{bookmark ? <FaBookmark className='fa-2x' /> : <FaRegBookmark className='fa-2x' />}</button>
);
}
export default Bookmark;

Answer 1

设置useState的初始值是一次性操作(就像初始化类构造函数中的状态一样(，它不会更新自己。

您可以使用useEffect挂钩在Bookmark组件中更新它。

useEffect(() => setBookmark(isBookmarked), [id]);