React中后端返回对象存入useState后渲染报错的疑问与解决方案咨询

Hey there! Let's clear up this error and get your data rendering properly.

First, let's break down why you're seeing this message: React can't directly render plain JavaScript objects like your {val1: Array(100), val2: Array(100)} structure. It only knows how to render primitive values (strings, numbers, booleans, null, undefined), React elements, or arrays of valid React children. When you try to render {data} directly, React has no idea how to parse that object, hence the error.

Let's go through your options based on what you want to display: #

1. Render specific values from the arrays (no full map needed)

If you don't need to show every item in val1 or val2, you can access individual elements or properties directly. For example:

// Initialize state with empty arrays to avoid undefined errors while loading
const [data, setData] = useState({ val1: [], val2: [] });

// After fetching your backend data:
setData(yourReceivedData);

return (
  <div>
    <p>First item in val1: {data.val1[0]}</p>
    <p>Total items in val2: {data.val2.length}</p>
  </div>
);

2. Render all items in the arrays (using map)

If you need to display every element in the arrays, map is the standard approach. Just remember to add a unique key prop to each child (use a unique identifier from your data if available; index works for simple cases when no unique ID exists):

return (
  <div>
    <h3>Val1 Items:</h3>
    {data.val1.map((item, index) => (
      <div key={index}>{item}</div>
    ))}
    
    <h3>Val2 Items:</h3>
    {data.val2.map((item) => (
      <span key={item.id}>{item.label}</span> {/* Use a unique property if your items are objects */}
    ))}
  </div>
);

3. Debugging: View the full object structure

If you just want to inspect the object for debugging purposes, convert it to a formatted string with JSON.stringify:

return (
  <pre>{JSON.stringify(data, null, 2)}</pre>
);

The <pre> tag preserves indentation, making the object structure easy to read.

Quick tip on state initialization #

It's a good habit to initialize your state with a matching structure (empty arrays here) so you don't run into Cannot read property 'val1' of undefined errors while waiting for your backend data to load.

To answer your core question: You don't always need to use map—it depends on what you want to render. But you can't render the entire object directly. Pick the approach that fits your UI needs!

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