javascript - useState Hook 不更新值

Question

我是 react 新手，我不明白为什么 h1 标签内的 title 会更新，但图像组件内的 url 不会更新？

列出组件

import React, { useState, useEffect, useContext } from 'react';
import Image from './Image';
import Size from '../index';

export default function Listing(props) {
  const [title, setTitle] = useState(props.title);
  const [url, setUrl] = useState(props.url);

  const value = useContext(Size);

  return (
    <div>
      <Image url={url} size={value.size} />

      <h1>{title}</h1>
      <form>
        <input id='URL' type='text' />
        <button
          onClick={e => {
            e.preventDefault();
            setUrl(document.getElementById('URL').value);
            setTitle(document.getElementById('URL').value);
          }}
        >
          Submit
        </button>
      </form>
    </div>
  );
}

到目前为止我的猜测是，如果 prop 发生变化，React 不会更新子组件，但是我如何手动更新它？

图像组件

import React from 'react';

export default class Image extends React.Component {
  //console.log(props.size);
  constructor(props) {
    super(props);
    this.url = props.url;
    this.size = props.size;
  }
  render() {
    return <img src={this.url} style={{ height: this.size + 'px' }} alt='' />;
  }
}```

Answer 1

您的代码有很多“味道”。这是简短、快速的答案:

将此:src={this.url}更改为:src={this.props.url}。

图像从未更新的原因是:

constructor(props) {
  super(props);
  this.url = props.url;
  this.size = props.size;
}

您正在将局部变量设置为初始属性值。由于您在构造函数中设置这些内容，因此这些行只会在创建组件时执行，而不会在发送新 Prop 时执行。React 仍然会触发重新渲染，因为您发送新的 props，但新值从未被使用，所以旧的结果仍然存在。

<小时/>

稍微长一点的答案:

像这里一样直接混合从 DOM 读取的值并不是一个好主意:

setUrl(document.getElementById('URL').value);
setTitle(document.getElementById('URL').value);

相反，有 2 个状态。一个保存输入的当前值，每次击键都会更新，另一个保存您发送到图像组件的值。

也许是这样的:

export default function Listing(props) {
  const [title, setTitle] = useState(props.title);
  const [inputUrl, setInputUrl] = useState(props.url);
  const [url, setUrl] = useState(props.url);

  const value = useContext(Size);

  return (
    <div>
      <Image url={url} size={value.size} />

      <h1>{title}</h1>
      <form>
        <input
          value={inputUrl}
          onChange={e => setInputUrl(e.target.value)}
        />
        <button
          type="button"
          onClick={() => {
            setUrl(inputUrl);
            setTitle(inputUrl);
          }}
        >
          Submit
        </button>
      </form>
    </div>
  );
}

另请注意，我删除了 e.preventDefault() 并将 type="button" 添加到您的按钮，因为默认类型是 submit，这可能会刷新您的页面。