เคล็ดลับเครื่องมือทำงานไม่ถูกต้องกับ activeIndex บนแผนภูมิวงกลม (ReCharts)

แผนภูมิวงกลมที่ใช้คำแนะนำเครื่องมือและ activeIndex ทำงานไม่ถูกต้อง คำแนะนำเครื่องมือจะไม่แสดงขึ้นเว้นแต่คุณจะกลับเข้าสู่เซกเตอร์เดิมอีกครั้ง เมื่อคุณไม่ได้อยู่ในเซกเตอร์เดียวกัน มันจะแสดงคำเตือน: ประเภทเสาที่ล้มเหลว: เสาไม่ถูกต้อง activeIndex ที่ให้มากับ Pie

<PieChart
        className="pie-chart"
        width={this.props.width ? this.props.width : 500}
        height={375}
        onMouseEnter={this.onPieEnter}
      >
        <Pie
          dataKey="value"
          data={data}
          // cx={250}
          // cy={100}
          activeIndex={
            this.state.activeIndex === undefined
              ? 0
              : this.state.activeIndex
          }
          activeShape={this.renderActiveShape}
          outerRadius={
            this.state.width <= 1025 && this.state.width > 768 ? 80 : 100
          }
          innerRadius={
            this.state.width <= 1025 && this.state.width > 768 ? 65 : 85
          }
          fill="#8884d8"
          onMouseEnter={this.onPieEnter}
        >
          {data.map((entry, index) => (
            <Cell
              key={index}
              fill={this.COLORS[index % this.COLORS.length]}
            />
          ))}
        </Pie>
</PieChart>

ดัชนีที่ใช้งานเริ่มต้นจะถูกตั้งค่าเสมอ ดังนั้นเมื่อคุณไม่ได้อยู่ในคำแนะนำเครื่องมือวงกลมเซกเตอร์เดียวกันจะแสดง


charts pie-chart recharts
person mitesh7172    schedule 10.01.2019    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

เมื่อคุณไม่ได้อยู่ในเซกเตอร์เดียวกัน ActiveIndex จะถูกเปลี่ยนโดยอัตโนมัติและส่งคืนประเภทอ็อบเจ็กต์ และจริงๆ แล้ว activeIndex นั้นเป็นประเภทตัวเลข ดังนั้นฉันจึงตรวจสอบเมธอด shouldComponentUpdate และจะส่งคืนค่าจริงหาก activeIndex เป็นเพียงตัวเลขเท่านั้น

ดังนั้นหากประเภท activeIndex ไม่ใช่ตัวเลข ส่วนประกอบจะไม่ได้รับการอัปเดตและสถานะ activeIndex จะยังคงเหมือนเดิมกับสถานะก่อนหน้า ดังนั้นคำแนะนำเครื่องมือจะไม่ถูกซ่อนไว้ตลอดเวลา

รหัสนี้ใช้งานได้สำหรับฉัน

shouldComponentUpdate(nextProps, nextState) {
    return typeof nextState.activeIndex === "number";
}
person mitesh7172    schedule 10.01.2019