Javascript 当状态更改时，React不会重新渲染组件

我有3个不同的div，我想像收音机一样工作。当我单击该div时，我想更改该div的颜色；当我单击另一个div时，我想删除上一个div的颜色，并向新单击的div添加颜色

我有条件样式渲染，它可以工作，只是它不会删除以前单击的div的颜色。看起来它不会重新渲染。我做错了什么

从React导入React； 从../components/ServiceItem导入ServiceItem； 从../utils/general导入{Row}； 从样式化组件导入样式化组件； 从../assets/service.png导入ServicePVZ； 从../mocs/SERVICES导入{SERVICES}； const Column=styled.div` 宽度：50%； `; 常量服务选择==>{ 回来 选择服务 {SERVICES.mapservice，索引=> } 2. ; };

---

导出默认服务选择 您在错误的位置处理状态，您应该在ServiceSelection组件上处理状态更改，ServiceItem组件应该是一个只显示数据的简单组件，接收所选值并触发对父级的回调，告知已选择新选项

您在错误的位置处理状态，您应该在ServiceSelection组件上处理状态更改，ServiceItem组件应该是仅显示数据的简单组件，接收所选值并触发对父项的回调，告知已选择新选项

现在您正在为每个单独的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;

---

现在，您正在为每个单独的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;