Javascript 道具未传递到功能

道具不会传递给子组件。它在打印时显示一个空对象。问题在

News.js

文件中。除道具通道外，所有其他功能均正常工作。 道具在

App.js

中传递到

News.js

。问题在于将道具传递给子组件

App.js

：

import React, {useState} from 'react';
import Axios from'axios';
import {v4 as uuidv4} from "uuid"; 
import './App.css';
import News from './components/News';

const App = () => {
    const [query, setQuery] = useState("");
    const [news, setNews] = useState([]);

    const APP_KEY = "hidden due to privacy issues";
    // const content = "kerala";
    const url =  `https://gnews.io/api/v3/search?q=${query}&token=${APP_KEY}`;
    // GET https://gnews.io/api/v3/search?q=example&token=API-Token 

    const getData = async () => {
        const result = await Axios.get(url)
        .then(result=>{
            console.log('inside getdata');
            
            setNews(result.data.articles);
            console.log(result);
            setQuery(" ");
            
        })
        .catch(error => {
            console.log(error);
        })
        
        
    };

    const onChange = e => {
        setQuery(e.target.value);
        
    };

    const onSubmit = e => {
        e.preventDefault();
        getData();
    };

    return (
        <div className="App">
          <header className="App-header">
             <h1>NEWSPAPER</h1>  
           </header> 
           <form className="search-form" onSubmit={onSubmit}>
                 <input 
                 type="text"
                 placeholder="Search News!" 
                 onChange={onChange}
                 value={query}
                 />
                 <input type="submit" value="Search"/>
            </form>
            <div className="news">
                {news !== [] && news.map(newsItem =>
                    <News key={uuidv4()} props={newsItem}/> 
                    // console.log(newsItem)
                    
                    )}
            </div>
        </div>
    )
}

export default App

export default function Facebook() {
  return <News />  // <=========================== here
}

import React，{useState}来自“React”；
从“Axios”导入Axios；
从“uuid”导入{v4 as uuidv4}；
导入“/App.css”；
从“/components/News”导入新闻；
常量应用=（）=>{
const[query，setQuery]=useState（“”）；
const[news，setNews]=useState（[]）；
const APP_KEY=“因隐私问题而隐藏”；
//const content=“喀拉拉邦”；
常量url=`https://gnews.io/api/v3/search?q=${query}&token=${APP_KEY}`；
//得到https://gnews.io/api/v3/search?q=example&token=API-代币
const getData=async（）=>{
const result=等待Axios.get（url）
。然后（结果=>{
log（'insidegetdata'）；
setNews（result.data.articles）；
控制台日志（结果）；
setQuery（“”）；
})
.catch（错误=>{
console.log（错误）；
})
};
const onChange=e=>{
setQuery（如target.value）；
};
const onSubmit=e=>{
e、 预防默认值（）；
getData（）；
};
返回(
报纸
{news！=[]&&news.map（newsItem=>
//console.log（新闻项）
)}
)
}
导出默认应用程序

---

道具在

App.js

中传递到

News.js

。问题是如何将道具传递给子组件。

如果您将道具作为

props=newsItem

传递，您将在子组件中使用

props.props.newsItem

创建

News

，而在

News.js

末尾没有道具：

import React, {useState} from 'react';
import Axios from'axios';
import {v4 as uuidv4} from "uuid"; 
import './App.css';
import News from './components/News';

const App = () => {
    const [query, setQuery] = useState("");
    const [news, setNews] = useState([]);

    const APP_KEY = "hidden due to privacy issues";
    // const content = "kerala";
    const url =  `https://gnews.io/api/v3/search?q=${query}&token=${APP_KEY}`;
    // GET https://gnews.io/api/v3/search?q=example&token=API-Token 

    const getData = async () => {
        const result = await Axios.get(url)
        .then(result=>{
            console.log('inside getdata');
            
            setNews(result.data.articles);
            console.log(result);
            setQuery(" ");
            
        })
        .catch(error => {
            console.log(error);
        })
        
        
    };

    const onChange = e => {
        setQuery(e.target.value);
        
    };

    const onSubmit = e => {
        e.preventDefault();
        getData();
    };

    return (
        <div className="App">
          <header className="App-header">
             <h1>NEWSPAPER</h1>  
           </header> 
           <form className="search-form" onSubmit={onSubmit}>
                 <input 
                 type="text"
                 placeholder="Search News!" 
                 onChange={onChange}
                 value={query}
                 />
                 <input type="submit" value="Search"/>
            </form>
            <div className="news">
                {news !== [] && news.map(newsItem =>
                    <News key={uuidv4()} props={newsItem}/> 
                    // console.log(newsItem)
                    
                    )}
            </div>
        </div>
    )
}

export default App

export default function Facebook() {
  return <News />  // <=========================== here
}

新闻！==[]

始终为真。没有两个物体是相等的。如果你想在

news

为空时在那里设置一个守卫来阻止调用

map

，你可以使用

news.length！==0

：

<div className="news">
    {news.length !== 0 && news.map(newsItem =>
        <News key={uuidv4()} props={newsItem}/> 
    )}
</div>

---

阅读最后三行，你认为Facebook在做什么？注意：

news！==[]

将始终为真<代码>[]！==[]为真，没有两个对象彼此相等。不过，这不太可能是你要问的问题。@Rahul-好眼力！！