Question

我正在尝试使用道具在屏幕上显示数字 0。但是，屏幕上什么也没有显示，我不知道为什么。这是代码：

import React,{Component} from 'react';
import Toolbar from './Toolbar.js';

    class Counter extends Component {
        constructor(props) {
        super(props);
     this.state ={
                counter:0   
             
     }
};
render() {
    return(
        <div>
              {this.state.counter.map(count=>(
                   <Toolbar count={count}/>
                ))}
            </div>
    )
}
};

export default Counter;

这就是我叫它的地方

<div className="toolbar__cart">
                    <span>{props.count}</span>
                        <a href="/Cart"><img src="Images/basket.png" alt="Basket" width="40"/></a></div>

Answer 1

我认为 map 函数不适用于此处，因为 counter 的值是整数而不是数组。有关 map 函数的详细信息，请参阅 here。

如果您只想让您的 Toolbar 组件显示 this.state.counter 的值，您可以使用：

return(
  <Toolbar count={this.state.counter}></Toolbar>
)

然后您的 Toolbar 组件将使用该 counter 值，如下所示：

function Toolbar(props) {
  return (
    <div>
      <span>{props.count}</span>
      <a href="/Cart"><img src="Images/basket.png" alt="Basket" width="40"/></a>
    </div>
  )
}

Answer 2

您错误地使用了 map 函数。

.map 是一个与数组一起使用的函数

退房：https://www.w3schools.com/jsref/jsref_map.asp

正确的代码：

render() {
return (
  <div>
    <Toolbar count={this.state.counter} />
  </div>
);

}

您可以在此处查看完整代码：https://codesandbox.io/s/naughty-lederberg-hb4wp?file=/src/App.js:203-309

Answer 3

counter.map 数组的映射函数 - 示例

import React,{Component} from 'react';
import Toolbar from './Toolbar.js';

    class Counter extends Component {
        constructor(props) {
        super(props);
        this.state ={
                counter:[0,1,2]  
        }
};
render() {
    return(
        <div>
              {this.state.counter.map(count=>(
                   <Toolbar count={count}/>
                ))}
            </div>
    )
}
};

道具未在屏幕上显示某些内容

3 个答案: