reactjs - 如何将对象数组从父级传递给子级并在反应中循环两个键值对

Question

我正在尝试将一组对象从父级传递给子级。我正在尝试循环对象数组以显示对象的两个键值对。但我没有得到我期望的输出。

这是 App.js

import React from 'react';
import './App.css';
import Parent from './Parent/Parent';


function App() {
  return (
    <div className="container">
      <div className='row'>
        <div className='col-12'>
          <Parent></Parent>
        </div>
      </div>
    </div>
  );
}

export default App;

这是 Parent.js

import React from 'react';
import './Parent.css';
import Child from '../Child/Child';


const Parent = () => {
    const studentsList = [{ name: 'James', location: 'Willington' }, { name: 'Thomas', location: 'Auckland' }]
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='parentData'>
                        <Child list={studentsList}></Child>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Parent

这是 Child.js

import React from 'react';
import './Child.css';

const Child = (props) => {
    console.log(props)
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    {props.list.map((currentValue, index) => <li key={index}>{currentValue.name && currentValue.location} </li>)}
                </div>
            </div>
        </div>
    )
}

export default Child

我期待这样的输出

詹姆斯威灵顿托马斯奥克兰

标签： reactjs

Answer 1

在 Child.js 中，您在 currentValue.name 和 currentValue.location 之间添加了 &&

.

这需要更改为：

{currentValue.name + " " + currentValue.location}