Question

我正在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>

Answer 1

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

CREATE OR REPLACE FUNCTION housekeeping
   (
     OUT p_message_out CHARACTER VARYING,
     OUT p_sqlstate_out CHARACTER VARYING
   )
   RETURNS RECORD AS 
$BODY$
BEGIN
  delete from client 
  where payment_id in (select payment_id 
                       from notification 
                       where sys_time <= CURRENT_TIMESTAMP - INTERVAL '30 Days');

  delete from notification 
  where sys_time <= CURRENT_TIMESTAMP - INTERVAL '30 Days';

  -- delete all employees for which no notification exists
  delete from employee emp
  where not exists (select *
                    from notification n
                    where n.employee_id = emp.employee_id);

  p_message_out  := 'Data deleted successfully.';
  p_sqlstate_out := 1; 

EXCEPTION WHEN OTHERS THEN
  --Exception handling
  p_message_out := SQLERRM;
  p_sqlstate_out := SQLSTATE;
END;
$BODY$
LANGUAGE plpgsql;

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"));

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

1 个答案: