無法更新無狀態子組件的 props

Question

我對 React 真的很陌生，但我試圖制作一個簡單的評論小程序。 我的目標是通過單擊“更改頭像”按鈕來更改每個用戶的顯示圖片。

但問題是我的按鈕位於無狀態App組件中。 事實上，除了Avatar之外，所有組件都是無狀態的。 單擊“更改頭像”只會更新控制台中appcounter的值:( 任何想法如何將這個counter道具傳播到Avatar ？這是完整的代碼：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

let users = {
  1: {
    name: 'Harry',
    comment: 'Vengadium Leviosa!'
  },
  2: {
    name: 'Jason',
    comment: 'I don\'t believe in magic..'
  },
  3: {
    name: 'Copperfield',
    comment: 'Believe it 😠'
  }
}

class Avatar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: props.counter
    };
  }

  componentDidUpdate() {
    this.setState = {
      count: this.props.counter
    }
  }

  render() {
    return <img src={`https://robohash.org/${this.state.count}`} className='avatar' alt="User Avatar" />;
  }
}

function Comment(props) {
  return <p><b>{props.user.name}: </b>{props.user.comment}</p>;
}

function CommentBox(props) {
  return (
    <div className='comment-box'>
      <Avatar user={props.user} counter={props.counter} />
      <Comment user={props.user} />
    </div>
  );
}

function App() {

  let appcount = 0;
  function increment() {
    ++appcount;
    console.log('appcount:', appcount);
  };

  return (
    <div className='app'>
      <h2>Welcome to the Comments App</h2>
      {
        Object.entries(users).map(([key, value]) => {
          return <CommentBox user={value} counter={appcount + key} />
        })
      }
      <button onClick={increment}>Change Avatar</button>
    </div>
  );
}

ReactDOM.render(<App />,
  document.getElementById('root')
);

Answer 1

您應該將appcount保留在App的 state 中，並將其傳遞給子組件。 這將導致CommentBox組件以及Avatar組件的重新渲染。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

let users = {
  1: {
    name: 'Harry',
    comment: 'Vengadium Leviosa!'
  },
  2: {
    name: 'Jason',
    comment: 'I don\'t believe in magic..'
  },
  3: {
    name: 'Copperfield',
    comment: 'Believe it 😠'
  }
}

function Avatar(props) {
  return (
      <img src={`https://robohash.org/${props.counter}`} className='avatar' alt="User Avatar" />
  );
}

function Comment(props) {
  return <p><b>{props.user.name}: </b>{props.user.comment}</p>;
}

function CommentBox(props) {
  return (
    <div className='comment-box'>
      <Avatar user={props.user} counter={props.counter} />
      <Comment user={props.user} />
    </div>
  );
}

function App() {
  const [appcount, setAppcount] = useState(0);

  function increment() {
    setAppcount(appcount + 1);
  };

  return (
    <div className='app'>
      <h2>Welcome to the Comments App</h2>
      {
        Object.entries(users).map(([key, value]) => {
          return <CommentBox user={value} counter={appcount + key} />
        })
      }
      <button onClick={increment}>Change Avatar</button>
    </div>
  );
}

ReactDOM.render(<App />,
  document.getElementById('root')
);