React JS API Json pull 设置布尔值以显示答案

【问题标题】：React JS API Json pull setting booleans to displayReact JS API Json pull 设置布尔值以显示
【发布时间】：2018-08-28 14:24:21
【问题描述】：

我在 React 中做一个 API 拉取，并有两个布尔值，我想显示它们的值。当我查看控制台日志时，值显示为“true”和“false”，但它们不会显示在 UI 中。有没有办法显示“真”和“假”的布尔值？ 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>

【问题讨论】：

是的.. 打印时在 UI 中进行类似{val === 'true' ? true : false} 的测试
你能显示代码，你尝试从哪里打印这些值..
应该是{dynamicItem.boolValue ? "true" : "false"}
{dynamicItem.boolValue ? "true" : "false"} 有效。谢谢！

标签： reactjs api boolean fetch

【解决方案1】：

您可以使用 cmets 中建议的 @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"));

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

【讨论】：