javascript - 为什么数组显示为字符串，但当我将其打印到控制台时，它却将其打印为数组？ ReactJS 功能组件

Question

我有一张卡的功能组件。那张卡片里面有一个 Accordion 。

Accordion :https://react-bootstrap.github.io/components/accordion/#basic-example

在其中我想使用 <select> 从下拉列表中进行选择和<option> jsx tags 。我从数据库收到 json 。在那json有一个key这是value是 array的Strings .

我想获取数组，并为其中的每个元素做一个选项供用户选择。我使用了从 ReactJS 速成类(class)中学到的这段代码(但它在我的情况下不起作用):

*注意 PROPS.PRODUCT.COLOR ，当我 console.log()它，是一个数组。但它不允许我使用 .map()就在上面。

<select ref = {myRef}
        required
        className="form-control">


                         {/*  this code is suppose to map the array and for every element in the array
                               to return a new option to the drop down list */}

                                {Array(props.product.color).map(color => {
                                    return <option key={color} value={color} >{color}</option>
                                })}


</select>

此代码返回一个“字符串”，并且不显示下拉列表，而是仅显示一个选项，并将所有元素组合在一起。

而不是:

1.绿色

2.蓝色

3.红色 ...

我得到:绿蓝红。

我的完整功能组件代码:

const myRef = createRef()

const FunctionalProductCardComponent = props => (
    // giving the div id only for design pourpse
    <div id="ProductCard">
        <Card style={{ width: '18rem'}}>
        <Card.Img variant="top" src={imageUrl} id='ringImgId'/>
        <Card.Body>
            <Card.Title>Card Title</Card.Title>
            <Card.Text>                    
                }
                <tr><td>Name:    {props.product.name}</td></tr>
                <tr><td>Price: {props.product.price}</td></tr>
                <tr><td>Gender:  {props.product.gender}</td></tr>
                <tr><td>Serial:  {props.product.serial}</td></tr>
            </Card.Text>
        </Card.Body>

        {/* this is accordion i took from react-bootstrap
          * for more info about this accordion, please visit: 
          * https://react-bootstrap.github.io/components/accordion/ 
          * :) 
          * */}
        {/*to make accordion option open as default: defaultActiveKey="0" */}
        <Accordion>
            <Card>
                <Card.Header>
                <Accordion.Toggle className="accordionToggleButton" as={Button} variant="link" eventKey="0">
                    Size :
                </Accordion.Toggle>
                </Card.Header>
                <Accordion.Collapse eventKey="0">
                <Card.Body>
                    {/* TODO: the option to select from sizes available */}
                </Card.Body>
                </Accordion.Collapse>
            </Card>
            <Card>
                <Card.Header>
                <Accordion.Toggle className="accordionToggleButton" as={Button} variant="link" eventKey="1">
                    Color : 
                </Accordion.Toggle>
                </Card.Header>
                <Accordion.Collapse eventKey="1">
                <Card.Body>
                    <div className='form-group'>
                        <select ref = {myRef}
                                required
                                className="form-control"
                                >
                                {Array(props.product.color).map(color => {
                                    return <option key={color} value={color} >{color}</option>
                                })}
                        </select>
                    </div>
                </Card.Body>
                </Accordion.Collapse>
            </Card>
        </Accordion>


    <Card.Body>
        <Card.Link href="#">Buy</Card.Link>
        <Card.Link id="addToCartBtn" href="#">Add To Cart</Card.Link>
    </Card.Body>
    </Card>
</div>
)

export default FunctionalProductCardComponent

我将 props 传递给功能组件的组件:

export default class ProductCardComponent extends Component{

constructor(props) {
    super(props)

    // binding the getProductList to 'this' key word so when i call it with 'this' it will know 
    // where to go.
    this.getProductList = this.getProductList.bind(this)

    // the empty list of product
    this.state = {
        product: [],
    }
}


componentDidMount() {
    // axios.get => sending a 'get' http request to the url i passed it.
    axios.get('http://localhost:PORT/table_name/')
    // getting the response, this is 'Promise'
    .then(response => {
        // setting the product list that in the state to be the list of data i got as response
        this.setState({
            product: response.data
        })
    })
    // if there's an error i will catch it here
    // Who you gonna call ??? De-Buggers !!!
    .catch(err => {if (err) console.log(err)})
}

// getting the product list from the state, and turning it into card functional component, so the data 
// is 'drawn' on the cards.
// getting it back from the functional component as an array of ready to display card.
getProductList() {
    // mapping the state (list of products), passing it callback the currentProduct
    return this.state.product.map( currentProduct => {
        // returning new 'FunctionalProductCardComponent' with the data of the current product
        return <FunctionalProductCardComponent product={currentProduct} key={currentProduct._id}/>
    })
}

render() {
    return (
        <div>
            <Row>
                {/* calling the method that will create the cards */}
                {this.getProductList()}
            </Row>
        </div>
    )
}

}

Answer 1

试试这个:

<select ref={myRef} required className='form-control'>    
  {props.product.color.map((color) => {
    return (
      <option key={color} value={color}>
        {color}
      </option>
    );
  })}
</select>;

您可以在任何数组上执行 .map() 函数。您现在要做的是将一个数组包装到另一个数组中，因此您不是将(示例数据)以下数据 [1,2,3] ，而是将其转换为 [[1,2,3]]。因此，.map() 函数仅执行一次(因为新数组只有一个元素)，而不是 N 次(N = 元素的数量)