usestate变量显示未定义的值?

Question

我在value变量上得到一个未定义的错误，这是一个状态。当在控制台中记录value时，它首先从useEffect中的props.value中获取值。但是在并发渲染中，它写的是undefined，所以我猜value变量在那之后变得未定义。但是当删除value.length代码时，这个问题就不存在了。那么未定义的错误不会发生，props.value在文本区域内。但是我需要value.length代码来确定一些CSS类。因此，我猜测之前的值变量是由props.value,value.length code runs. But then the state default is set as "" so值设置。长度'应该返回0，即使它首先运行，对吗?所以我不明白为什么我的状态变量值在两者之间变得未定义。

import React, { useState, useEffect } from "react";
const TextArea = (props) => {
const [value, setValue] = useState("");
useEffect(() => {
window.sessionStorage.setItem(props.name, value);
}, [value, props]);
useEffect(() => {
setValue(props.value);
}, [props.value]);
return (
<div className="input-box input-box--3">
<textarea
required
name={props.name}
type="text"
rows={props.rows}
value={value}
onChange={(event) => setValue(event.target.value)}
className={
console.log(value)
// value.length === 0
//   ? "input-box--field input-box--field--3"
//   : "input-box--field input-box--field--3 input-box--field--3--not-empty"
}
autoComplete={props.autoComplete}
/>
<span
className={
value.length === 0
? "input-box--placeholder"
: "input-box--placeholder input-box--placeholder--not-empty"
}
>
{props.placeholder}
</span>
</div>
);
};
export default TextArea;

Answer 1

这个值取决于valueprop，所以如果你在这个prop中传递一些东西，它应该工作:

https://codesandbox.io/s/mystifying-cartwright-x6ldj0?file=/src/App.js

但是，您可以通过检查传递的prop是否未定义来使它更加防弹:

setValue(props.value ? props.value : "");