React项目中JSON字符串无法在JSX组件中正常显示的问题求助

Looking at your code and problem description, the core issue here is likely how you're trying to render the eventsItems.info value. When you use ${eventsItems.info} in your Typography component, if info is an object or array (which it probably is, since you parsed JSON from the API), JavaScript will convert it to the string [object Object] instead of showing its actual content.

Here are a few targeted fixes you can implement:

1. Format Raw JSON with JSON.stringify #

If you just want to display the full JSON structure for debugging or straightforward viewing, use JSON.stringify with indentation to make it readable:

Modify your UnitEventsItems.js component's Typography line:

<Typography>
  {JSON.stringify(eventsItems.info, null, 2)}
</Typography>

The null and 2 parameters add pretty-printing with 2 spaces of indentation, turning messy object references into a human-readable structure.

2. Render Nested Content in a User-Friendly Way #

If you want to display the data without raw JSON syntax, you'll need to handle nested objects/arrays explicitly. Add a helper function to render different data types properly:

Update the GetEventsItems function like this:

const GetEventsItems = (props) => {
  const { parsed = {} } = props;
  const getEventsItems = Object.entries(parsed).map((item, i) => ({
    item_Id: i,
    label: item[0],
    info: item[1]
  }));

  // Helper to render any value (handles objects, arrays, and primitives)
  const renderInfo = (value) => {
    if (typeof value === 'object' && value !== null) {
      // Handle arrays
      if (Array.isArray(value)) {
        return (
          <ul style={{ margin: '4px 0 0 16px', padding: 0 }}>
            {value.map((arrItem, idx) => (
              <li key={idx}>{renderInfo(arrItem)}</li>
            ))}
          </ul>
        );
      }
      // Handle objects
      return (
        <div style={{ margin: '4px 0 0 0' }}>
          {Object.entries(value).map(([key, val], idx) => (
            <div key={idx} style={{ margin: '2px 0' }}>
              <strong>{key}:</strong> {renderInfo(val)}
            </div>
          ))}
        </div>
      );
    }
    // Handle primitive values (string, number, boolean)
    return <span>{value}</span>;
  };

  return (
    <div style={{ marginBottom: theme.spacing(4) }}>
      {getEventsItems.map((eventsItems) => (
        <Box key={eventsItems.item_Id}> {/* Added missing key prop for React rendering */}
          <Typography variant="subtitle2" style={{ marginBottom: '4px' }}>
            <strong>{eventsItems.label}</strong>
          </Typography>
          <Typography>{renderInfo(eventsItems.info)}</Typography>
        </Box>
      ))}
    </div>
  );
};

Note: I added a missing key prop to the mapped Box component—this is critical to avoid React warnings and ensure efficient re-renders.

3. Add Fallbacks for Edge Cases #

Even if your console logs look good, there might be edge cases where info is undefined or empty. Add a fallback to handle these scenarios gracefully:

<Typography>
  {eventsItems.info ? JSON.stringify(eventsItems.info, null, 2) : 'No additional info available'}
</Typography>

Quick Debug Check #

To confirm exactly what data you're working with, add a console log inside your UnitEventsItems component:

console.log(`Info for ${eventsItems.label}:`, typeof eventsItems.info, eventsItems.info);

This will help you adjust the rendering logic to match the actual structure of your parsed JSON.

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