當狀態改變時，React 不會重新渲染組件

Question

我有 3 個不同的 div，我想像收音機一樣工作。 當我單擊 div 時，我想更改該 div 的顏色，當我單擊另一個 div 時，我想刪除前一個 div 的顏色並將顏色添加到新單擊的 div。

我有條件樣式渲染，它有效，但它不會刪除先前單擊的 div 的顏色。 看起來它不會重新渲染。 我做錯了什么？

 import React from "react"; import ServiceItem from "../components/serviceItem"; import { Row } from "../utils/general"; import styled from "styled-components"; import ServicePVZ from "../assets/service.png"; import { SERVICES } from "../mocs/SERVICES"; const Column = styled.div` width: 50%; `; const ServiceSelection = () => { return ( <div> <h1>Select service</h1> <Row> <Column> <img src={ServicePVZ} /> {SERVICES.map((service, index) => ( <ServiceItem name={service.name} price={service.price} key={index} id={index} /> ))} </Column> <Column> 2 </Column> </Row> </div> ); }; export default ServiceSelection;

 import React, { useState, useEffect } from "react"; import styled from "styled-components"; const ServiceBox = styled.div` width: 300px; height: 50px; border: 1px solid #f9f9f9; border-radius: 5px; margin-bottom: 10px; padding: 20px; display: flex; justify-content: space-between; align-items: center; :hover { border: 1px solid black; } `; const ServiceItem = ({ name, price, id }) => { const [active, updateActive] = useState(false); const [selectedValue, updateSelectedValue] = useState(0); const changeActiveService = id => { if (id > 0) { updateSelectedValue(id); console.log("Changed ID to " + id); } else { console.log("You clicked div with ID 0 "); updateSelectedValue(0); } }; return ( <> <ServiceBox onClick={() => changeActiveService(id)} style={{ backgroundColor: selectedValue === id ? "red" : "green" }} > <div>{id}</div> <div>{name}</div> <div>{price}</div> </ServiceBox> </> ); }; export default ServiceItem;

Answer 1

您在錯誤的地方處理狀態，您應該處理ServiceSelection組件上的狀態更改， ServiceItem組件應該是一個簡單的組件，它只顯示數據、接收選定的值並觸發對父級的回調，告知有一個新選項選中

Answer 2

現在，您正在為每個單獨的 ServiceItem 使用一個狀態掛鈎。 您應該做的是將狀態提升到父組件，然后簡單地將“活動”道具傳遞給 ServiceItem。 像這樣的東西：

import React, {useState} from "react";
import ServiceItem from "../components/serviceItem";
import { Row } from "../utils/general";
import styled from "styled-components";
import ServicePVZ from "../assets/service.png";
import { SERVICES } from "../mocs/SERVICES";

const Column = styled.div`
  width: 50%;
`;

const ServiceSelection = () => {
  const [active, updateActive] = useState(false);
  const [selectedValue, updateSelectedValue] = useState(0);

  const changeActiveService = id => {
    if (id > 0) {
      updateSelectedValue(id);
      console.log("Changed ID to " + id);
    } else {
      console.log("You clicked div with ID 0 ");
      updateSelectedValue(0);
    }
  };
  return (
    <div>
      <h1>Select service</h1>
      <Row>
        <Column>
          <img src={ServicePVZ} />
          {SERVICES.map((service, index) => (
            <ServiceItem
              name={service.name}
              price={service.price}
              key={index}
              id={index}
              active={selectedValue === index}
              onClick={changeActiveService}
            />
          ))}
        </Column>
        <Column> 2 </Column>
      </Row>
    </div>
  );
};

export default ServiceSelection;

import React, { useState, useEffect } from "react";
import styled from "styled-components";

const ServiceBox = styled.div`
  width: 300px;
  height: 50px;
  border: 1px solid #f9f9f9;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  :hover {
    border: 1px solid black;
  }
`;

const ServiceItem = ({ name, price, id, active, onClick }) => {
  

  return (
    <>
      <ServiceBox
        onClick={onClick}
        style={{ backgroundColor: active ? "red" : "green" }}
      >
        <div>{id}</div>
        <div>{name}</div>
        <div>{price}</div>
      </ServiceBox>
    </>
  );
};

export default ServiceItem;