Javascript 将道具传递给另一个组件并重新绘制页面

在1组件中，当我点击图片时，我得到它的id，我通过道具将id传递给另一个组件。我需要每次收到这些道具，并发送一个带有图像id的feth-request，然后重新绘制组件。如何正确地做

第一部分

将fetch分解成一个实用函数，当props更新时，可以在componentDidMount和componentdiddupdate中调用该函数

另外，不要将传递的道具存储到本地组件状态，这是react中的反模式。您只需在生命周期方法中使用传递的idImg道具

export default class Modal extends Component {
  constructor(props){
    super(props);
    this.state = {
      imgSrc: ' ',
      commentList: [], 
    }
  }

  fetchImage = imageId => {
    this.setState({ isLoaded: false }); // <-- set loading state
    fetch(`./api/${imageId}`, {
        method: 'GET',
        })
      .then(res => res.json())
      .then((result) => {
        this.setState({
          isLoaded: true,
          imgSrc: result.src
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    );
  };

  componentDidMount() {
    this.fetchImage(this.props.idImg); // <-- pass idImg prop
  }

  componentDidUpdate(prevProps) {
    if (prevProps.idImg !== this.props.idImg) { // <-- compare idImg values
      this.fetchImage(this.props.idImg); // <-- pass idImg prop
    }
  }

将fetch分解成一个实用函数，当props更新时，可以在componentDidMount和componentdiddupdate中调用该函数

另外，不要将传递的道具存储到本地组件状态，这是react中的反模式。您只需在生命周期方法中使用传递的idImg道具

export default class Modal extends Component {
  constructor(props){
    super(props);
    this.state = {
      imgSrc: ' ',
      commentList: [], 
    }
  }

  fetchImage = imageId => {
    this.setState({ isLoaded: false }); // <-- set loading state
    fetch(`./api/${imageId}`, {
        method: 'GET',
        })
      .then(res => res.json())
      .then((result) => {
        this.setState({
          isLoaded: true,
          imgSrc: result.src
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    );
  };

  componentDidMount() {
    this.fetchImage(this.props.idImg); // <-- pass idImg prop
  }

  componentDidUpdate(prevProps) {
    if (prevProps.idImg !== this.props.idImg) { // <-- compare idImg values
      this.fetchImage(this.props.idImg); // <-- pass idImg prop
    }
  }

---

idImg道具更新时，重新蚀刻发生在何处以及如何发生？此代码仅更新This.state.\u id状态值。您需要在componentDidUpdate中添加逻辑以响应此.state.\u id更新以触发图像获取的副作用。另外，在componentDidMount中调用this.setState完全没有问题。我认为componentDidUpdate可以做到这一点。当idImg道具更新时，refetch在哪里以及如何发生？此代码仅更新This.state.\u id状态值。您需要在componentDidUpdate中添加逻辑以响应此.state.\u id更新以触发图像获取的副作用。另外，在componentDidMount中调用this.setState完全没有问题，我认为componentDidUpdate可以做到这一点

 export default class Modal extends Component {
    constructor(props){
        super(props);
        this.state = {
            imgSrc: ' ',
            commentList: [], 
            _id: this.props.idImg
        }
this.nameFunction=this.nameFunction.bind(this);
    }
    
    
    componentDidMount(){
this.nameFunction();
        }
    componentDidUpdate(prevProps) {
        if (prevProps.idImg!== this.props.idImg) {
            this.setState({
                _id: this.props.idImg,
            })
        }
    }
nameFunction(){
fetch(`./api/${this.state._id}`, {
            method: 'GET',
            })
        .then(res => res.json())
        .then((result) => {
            this.setState({
                isLoaded: true,
                imgSrc: result.src
            });
        },
        (error) => {
            this.setState({
                isLoaded: true,
                error
            });
        }
        );
}

export default class Modal extends Component {
  constructor(props){
    super(props);
    this.state = {
      imgSrc: ' ',
      commentList: [], 
    }
  }

  fetchImage = imageId => {
    this.setState({ isLoaded: false }); // <-- set loading state
    fetch(`./api/${imageId}`, {
        method: 'GET',
        })
      .then(res => res.json())
      .then((result) => {
        this.setState({
          isLoaded: true,
          imgSrc: result.src
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    );
  };

  componentDidMount() {
    this.fetchImage(this.props.idImg); // <-- pass idImg prop
  }

  componentDidUpdate(prevProps) {
    if (prevProps.idImg !== this.props.idImg) { // <-- compare idImg values
      this.fetchImage(this.props.idImg); // <-- pass idImg prop
    }
  }