javascript - 如何根据 JSON 文件中的 bool 值自动更改文本

Question

我有一个 JSON 文件:

[
 {
 "id": 1,
 "text": "Hello",
 "availability": false
 },
 {
 "id": 2,
 "text": "Hello",
 "availability": true
 }
]

我想要实现的是当 availability : false 时文本自动从 hello 变为 goodbye。如果 availability : true 那么我希望它保持显示“Hello”的状态。

到目前为止，这是我的代码:

import React, { Component } from 'react';
import './styles.css'

class GetOnlinePosts extends Component {
constructor(props){
super(props);
this.state = {
    error : null,
    isLoaded : false,
    posts : []          
 };
}
 componentDidMount(){
 fetch("https://api.myjson.com")
 .then( response => response.json())
 .then(
    (result) => {
        this.setState({
            isLoaded : true,
            posts : result
        });
    },
    (error) => {
        this.setState({
            isLoaded: true,
            error
        })
      },
    )
  }
 render() {
 const {error, isLoaded, posts} = this.state;
 const orderedPosts = [...posts.filter((post) => post.availability), ...posts.filter((post) => !post.availability)]
 if(error){
    return <div>Error in loading</div>
 }else if (!isLoaded) {
    return <div>Loading ...</div>
 }else{
    return(
        <div>
            <div className="tiles">
            {
                orderedPosts.map(post => (
                    <div key={post.id}>
                     <div className="tile">
                         <p className="greeting">{post.text}</p>
                     </div> 
                </div>
                ))
            }
            </div>
        </div>
    );
   }
  }
 }

 export default GetOnlinePosts;

当 availability : false 时将文本从 'Hello' 更改为 'Goodbye' 并保留文本 'Hello' 时的任何帮助availability : true 会很棒。提前致谢

Answer 1

请为 map 添加条件

<p className="greeting">{post.availability ? post.text : 'Goodbye'}</p>

请更改此行

import React, { Component } from 'react';
import './styles.css'

class GetOnlinePosts extends Component {
constructor(props){
super(props);
this.state = {
    error : null,
    isLoaded : false,
    posts : []          
 };
}
 componentDidMount(){
 fetch("https://api.myjson.com")
 .then( response => response.json())
 .then(
    (result) => {
        this.setState({
            isLoaded : true,
            posts : result
        });
    },
    (error) => {
        this.setState({
            isLoaded: true,
            error
        })
      },
    )
  }
 render() {
 const {error, isLoaded, posts} = this.state;
 const orderedPosts = [...posts.filter((post) => post.availability), ...posts.filter((post) => !post.availability)]
 if(error){
    return <div>Error in loading</div>
 }else if (!isLoaded) {
    return <div>Loading ...</div>
 }else{
    return(
        <div>
            <div className="tiles">
            {
                orderedPosts.map(post => (
                    <div key={post.id}>
                     <div className="tile">
                         <p className="greeting">{post.availability ? post.text : 'Goodbye'}</p> // Change this line
                     </div> 
                </div>
                ))
            }
            </div>
        </div>
    );
   }
  }
 }

 export default GetOnlinePosts;