渲染复杂 object usint react js 和 javascript

Question

如何使用以下响应显示复杂的 json object，

const movie = "AVTAR";
const displayData = {
   "actor": [{
      "id": 1,
      "name": "john"
   }, {
      "id": 2,
      "name": "peter"
   }],
   "actress": [{
      "id": 1,
      "name": "ema"
   }, {
      "id": 2,
      "name": "molly"
   }]
}

在 UI 上我需要显示，

Avatar >> actor >> john
Avatar >> actor >> peter
Avatar >> actress >> ema
Avatar >> actress  >>molly

我正在使用带有 es 的 React 功能组件 map function

Answer 1

因此，根据描述，您正在为电影的每个演员创建小面包屑。 因为每个面包屑都需要一个唯一的 ID，所以最好整理数据以确保这是可能的，而不是在组件中使用map迭代 ID。 这也将确保您能够制作非常简单且易于测试的组件。

因此，为了做到这一点，我们需要将数据从复杂的 model 更改为更简单的数据：一组我们可以迭代的对象，每个 object 都有自己的唯一 ID（目前他们没有 - 演员和女演员目前共享ID）。

有两个步骤：

1. 将演员角色添加到他们的每个对象中
2. 重新标识所有对象，使每个对象都是独一无二的。

让我们先从这个开始。

 const data={actor:[{id:1,name:"john"},{id:2,name:"peter"}],actress:[{id:1,name:"ema"},{id:2,name:"molly"}]}; // For each cast member add their role (actor/actress) // Do this by mapping over an array, and then // returning a new object that includes the type function addRole(data, type) { return data[type].map(n => { return {...n, type }; }); } // Re-id all of the cast information // Flatten the arrays, map over them, and return a // new array where each object has a consecutive id function reId(arrs) { return arrs.flat().map((n, id) => { return {...n, id: id + 1 }; }); } // Add all that together const wrangled = reId([ addRole(data, 'actor'), addRole(data, 'actress') ]); console.log(wrangled);

完成后，您可以将标题和经过争论的数据放入组件中，然后为每部电影的演员构建面包屑。

 // Accepts a title, and some wrangled data // We `map` over the data and for each cast member // we use the Breadcrumb component to // generate a breadcrumb for that cast member // Note we use the new generated id as each breadcrumb key function Movie({ title, data }) { return ( <section> {data.map(char => { return ( <Breadcrumb key={char.id} title={title} char={char} /> ) })} </section> ); } // Breadcrumb accepts a title, and the character data // and produces an inline list breadcrumb for that character function Breadcrumb({ title, char }) { return ( <ul> <li>{title}</li> <li>{char.type}</li> <li>{char.name}</li> </ul> ); } const data={actor:[{id:1,name:"john"},{id:2,name:"peter"}],actress:[{id:1,name:"ema"},{id:2,name:"molly"}]}; function addRole(data, type) { return data[type].map(n => ({...n, type })); } function reId(arrs) { return arrs.flat().map((n, id) => ({...n, id: id + 1 })); } const wrangled = reId([ addRole(data, 'actor'), addRole(data, 'actress') ]); ReactDOM.render( <Movie title="Avatar" data={wrangled} />, document.getElementById('react') );

 ul { list-style: none; margin-left: 0; padding-left: 0;} li { display: inline; text-transform: uppercase;} li:first-child { color: red; } li:not(:last-child)::after { content: ' >> '; color: black;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 2

我喜欢通过查看代码示例来学习，开始时我也很挣扎，希望对您有所帮助。

// First flat the displayData object into an array of objects in the form { type, id, name }
const flatData = Object.entries(displayData).flatMap(([k, v]) => {
    // Because type (actor / actress) is an array we have to iterate over its keys and values
    const inner = v.map(({id, name}) => {
        // Return an object with typem, id and name
        return {type: k, id, name};
    });
    // return the previously constructed object
    return inner;
    // Flattens the array
}).flat();

// Iterate the data and display its content
flatData.forEach( (data) => {
    // Destructure the values from the data object
    const {type, id, name} = data
    console.log(`${movie} >> ${type} >> ${name}`);  
});

有任何问题就问。