javascript React JS API JSON pull设置要显示的布尔值

x9ybnkn6  于 2023-08-02  发布在  Java
关注(0)|答案(1)|浏览(86)

我在React中做了一个API拉取,有两个布尔值,我想显示它们的值。当我查看控制台日志时,值显示为“true”和“false”,但它们不会显示在UI中。有没有办法显示布尔值“true”和“false”?新的JS

constructor(props) {
            super(props);
            this.state = {
                isLoaded: false,
                items: [],
                callToggleState: false,
            }
            
        }
    
    componentDidMount() {
        fetch(url , {
            method: 'get',
            mode: 'cors',
            headers: { 
            'X-API-KEY': API_KEY,
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            }
    
        })
            .then(res => res.json())
            .then(json => {
              console.log(json);
                this.setState({
                    isLoaded: true,
                    items: json,
                  
                })
            })
        };
////////////////////////////////////////

return (
                <div className="container">
                 <ul>
                    {items.map((dynamicItem) => (
                        <li key={dynamicItem.device_id}> 
<li>
//////////////////////////////////////
</li>

字符串

n6lpvg4x

n6lpvg4x1#

您可以使用注解中建议的@xadm条件渲染。

class App extends React.Component {
  state = {
    items: [
      { device_id: 1, name: "foo", bool: true },
      { device_id: 2, name: "bar", bool: false },
      { device_id: 3, name: "baz", bool: true },
    ]
  }
  render() {
    return (
      <div>
        <ul>
        {
          this.state.items.map( dynamicItem =>
            <li>
            ID: {dynamicItem.device_id}<br />
            Name: {dynamicItem.name }<br />
            Bool: {dynamicItem.bool ? "true" : "false"}
            { /* or maybe? */}
            { /* Bool: {dynamicItem.bool ? "available" : "not in stock"} */}
            </li>
          )
        }
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

个字符

相关问题