React组件中访问对象数组内对象字段失败及JSX子元素报错的技术咨询

Hey there, let's break down and fix these two issues you're facing with React, TypeScript, and Axios!

1. TypeScript Type Errors When Accessing Array Elements #

First, let's tackle those confusing type errors with your specificDataArray:

What's Going On? #

• The error Property 'specificData1' does not exist on type 'number[]' means TypeScript thinks your specificDataArray is an array of numbers, not an array of SpecificData objects as defined in your interface. This usually happens if your component's state isn't properly typed, or if the data coming back from your API doesn't match the structure you expected.
• The ':' expected error is a syntax issue with optional chaining: when accessing an array index, you need to place the ?. before the square brackets, not after. So specificDataArray?[0] is invalid—it should be specificDataArray?.[0].

Fixes to Apply: #

a. Ensure Your State is Properly Typed

Make sure your component's state explicitly uses the MyData interface you defined. For example:

interface MyComponentState {
  currentTestLog: MyData | undefined;
  // Add other state properties here if needed
}

class MyComponent extends React.Component<{}, MyComponentState> {
  state: MyComponentState = {
    currentTestLog: undefined,
    // Initialize other state values here
  };

  // Your fetchData method here...
}

This tells TypeScript exactly what shape currentTestLog should have, so it won't incorrectly infer specificDataArray as a number[].

b. Correct the Optional Chaining Syntax

Update your element access code to use the proper optional chaining syntax for arrays:

this?.state?.currentTestLog?.specificDataArray?.[index]?.specificData1

The ?. before [index] handles cases where specificDataArray is undefined, and the final ?. handles cases where the index is out of bounds (resulting in undefined).

c. Verify API Response Structure

Double-check the raw data coming back from your Axios call. If the API is returning a number[] for specificDataArray instead of the SpecificData objects you expected, you'll need to either adjust your interface to match the actual response, or transform the data in your fetchData method to fit your interface.

2. Multiple Children Error in <pre> Tag #

Next, let's fix the JSX error with your <pre> tag:

What's Going On? #

TypeScript enforces that the <pre> tag (like many HTML elements) only accepts a single child element. When you added the map function inside it, you ended up with multiple children (e.g., static text + multiple elements from the map), which violates this type constraint.

Fix to Apply: #

Wrap all the children inside the <pre> tag with a React Fragment. Fragments let you group multiple elements without adding extra DOM nodes, which is perfect here. You can use either the short syntax or the full React.Fragment syntax:

Short Syntax (React 16.2+)

<pre>
  <>
    {/* Your existing static text or content here */}
    {this.state.currentTestLog?.specificDataArray?.map((item, index) => (
      <div key={index}>{item.specificData1}</div>
    ))}
  </>
</pre>

Full Syntax

<pre>
  <React.Fragment>
    {/* Your existing static text or content here */}
    {this.state.currentTestLog?.specificDataArray?.map((item, index) => (
      <div key={index}>{item.specificData1}</div>
    ))}
  </React.Fragment>
</pre>

Now the <pre> tag has only one child (the Fragment), which satisfies TypeScript's type requirements, and your content will render exactly as before.

内容的提问来源于stack exchange，提问作者vincent