Reactjs 如何使用useState钩子设置标记文本？

我有一个具有以下钩子的功能组件：-

const [imagePreview, setImagePreview] = useState('');

稍后，在更改事件中，我有以下内容：-

    if (imagePreviewUrl) {
  setImagePreview( (<div>
    <br/> <img src={imagePreviewUrl} alt="icon" width="200" /> 
    </div>));
}

if（imagePreviewUrl）{
setImagePreview（(


));
}

看起来好像什么都没有。我如何设置它？我可以这样做：-

  let imagePreview = null;
if (imagePreviewUrl) {
  imagePreview = (<div>
    <br/> <img src={imagePreviewUrl} alt="icon" width="200" /> 
    </div>);
}

让imagePreview=null；
如果（imagePreviewUrl）{
图像预览=(


);
}

但它有点难看。我认为useState是推荐的方法

更新更多代码：-

  const fileChangedHandler = event => {
setSelectedFile(event.target.files[0]);
let reader = new FileReader();
reader.onloadend = () => {
setImagePreviewUrl(reader.result);
}
reader.readAsDataURL(event.target.files[0])
if (imagePreviewUrl) {
// can't break into multiline, sytax error 
setImagePreview('(<div><br/> <img src={imagePreviewUrl} alt="icon" width="200" /> </div>)');

const fileChangedHandler=event=>{
setSelectedFile（event.target.files[0]）；
let reader=new FileReader（）；
reader.onloadend=（）=>{
setImagePreviewUrl（reader.result）；
}
reader.readAsDataURL（event.target.files[0]）
如果（imagePreviewUrl）{
//无法打断多行，sytax错误
setImagePreview（“（
）”）；

}

返回(
个人资料图片：
{fileChangedHandler（e）}}/>
//我想在上传之前在这里显示所选图像作为预览
{imagePreview}
)

---

希望我能给出一个清晰的理解。我的意图是什么

这不是推荐的方法，您需要的是：

const[imagePreview，setImagePreview]=useState（false）；
如果（imagePreviewUrl）{
setImagePreview（true）；
}
返回(
图像预览&(


)
);

这不是推荐的方法，您需要的是：

const[imagePreview，setImagePreview]=useState（false）；
如果（imagePreviewUrl）{
setImagePreview（true）；
}
返回(
图像预览&(


)
);

出现问题的原因是，在使用

setImagePreviewUrl

更新后，您试图访问

imagePreviewUrl

的状态-这将不起作用

constfilechangehandler=（事件）=>{
// ...
reader.onloadend=（）=>{
//这是异步的
//所以这绝对不会让你失望
//在到达下面的'if'语句之前执行
//另外，`setImagePreviewUrl`也是异步的
setImagePreviewUrl（reader.result）
}
// ...
如果（imagePreviewUrl）{
//正在使用imagePreviewUrl的旧值
//这里，由于初始值的计算结果为
//'false'，下面的'setImagePreview'调用
//永远不会被处决
}
}

imagePreviewUrl

的新值不会立即可用，因为它是异步的，所以您可能应该创建一个单独的挂钩，用于侦听对

imagePreviewUrl

的更改和更新

imagePreview

函数应用程序（）{
const[imagePreviewUrl，setImagePreviewUrl]=React.useState（“”）；
常量[imagePreview，setImagePreview]=React.useState（null）；
const fileChangedHandler=（）=>{
setImagePreviewUrl(
"https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg"
);
};
React.useffect（（）=>{
如果（imagePreviewUrl！==“”）{
常量图像=(
);
设置图像预览（图像）；
}
}，[imagePreviewUrl]）；
返回(
触发文件更改处理程序。
{imagePreview}
);
}

下面是一个工作示例：

---

出现问题的原因是，在使用

setImagePreviewUrl

更新后，您正试图访问

imagePreviewUrl

的状态-这将不起作用

constfilechangehandler=（事件）=>{
// ...
reader.onloadend=（）=>{
//这是异步的
//所以这绝对不会让你失望
//在到达下面的'if'语句之前执行
//另外，`setImagePreviewUrl`也是异步的
setImagePreviewUrl（reader.result）
}
// ...
如果（imagePreviewUrl）{
//正在使用imagePreviewUrl的旧值
//这里，由于初始值的计算结果为
//'false'，下面的'setImagePreview'调用
//永远不会被处决
}
}

imagePreviewUrl

的新值不会立即可用，因为它是异步的，所以您可能应该创建一个单独的挂钩，用于侦听对

imagePreviewUrl

的更改和更新

imagePreview

函数应用程序（）{
const[imagePreviewUrl，setImagePreviewUrl]=React.useState（“”）；
常量[imagePreview，setImagePreview]=React.useState（null）；
const fileChangedHandler=（）=>{
setImagePreviewUrl(
"https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg"
);
};
React.useffect（（）=>{
如果（imagePreviewUrl！==“”）{
常量图像=(
);
设置图像预览（图像）；
}
}，[imagePreviewUrl]）；
返回(
触发文件更改处理程序。
{imagePreview}
);
}

下面是一个工作示例：

---

如果（imagePreviewUrl）检查结果为

真

？“改变事件”看起来像什么，你只是展示了它的一部分。它是如何触发的？请现在检查。我添加了更多的代码。希望它显示了这里的期望值？我看到了问题所在。

if（imagePreviewUrl）

检查是否计算为

true

？“改变事件”看起来像什么，你只是展示了它的一部分。它是如何触发的？请现在检查。我添加了更多的代码。希望它能显示出这里的预期？我明白问题所在。我没有测试它。肯定会有用的。我试图通过钩子来实现它。我没有测试它。肯定会有用的。我正试图通过钩子实现一种更简洁的方式。我可以知道为什么“imagePreviewUrl的新值无法立即提供”吗？我猜这是一个同步调用，应该立即设置。没关系，我正在学习reactjs。@masiboo它不是异步的

return (
 <div>
 <label>Profile picture: </label>
  <input className="Column" type="file" accept="image/*" 
       onChange={(e) => {fileChangedHandler(e)}} />
  // I want to show the selected image here as preview before upload 
  { imagePreview }
  </div>
 )

const [imagePreview, setImagePreview] = useState(false);

if (imagePreviewUrl) {
  setImagePreview(true);
}

return (
  imagePreview && (
    <div>
      <br /> <img src={imagePreviewUrl} alt="icon" width="200" />
    </div>
  )
);