Javascript 带有获取API结果的搜索栏（ReactJs）

我正在搜索如何基于fetchapi结果创建搜索栏。API json结果返回两个沙发及其名称、图像和其他与本例无关的方面。我希望搜索是基于沙发的名称，但我不知道如何做，如果组件不是父和子。我将在下面描述我的目录路径：

- src
-- components
--- Home
---- Main (Fetch request for name and image of sofas)
-- containers
--- other_files
--- Search
---- SearchBar.js (Here I need to make a filter search for the sofa name)
-- index.js
-- route.js

以下是获取json的结果：

[
    0:
        brand:
            created_on: "2017-05-02T10:27:23.905454Z"
            id: 1
            image: "/media/filer_public/ac/0b/ac0ba5cb-4f00-4386-aa8b-984919abdf8d/logoluso.png"
            name: "LUSOGRAPH"
            updated_on: "2018-04-09T08:22:52.022891Z"
        category: null
        code: "8ed96b9c"
        created_on: "2017-05-02T10:28:11.951052Z"
        description: "<p><strong>PELE</strong></p>"
        fabric_color_number: 1
        id: 1
        image: "/media/filer_public/f3/59/f3596b6f-1d15-46a5-9b40-f2c275bfd65c/ancora.png"
        is_active: true
        name: "ÂNCORA"
        updated_on: "2018-06-18T09:31:07.512569Z"

    1:
        {id: 2, brand: {…}, category: null, is_active: true, code: "534e44bc", …}
]

[
0:
品牌：
创建于：“2017-05-02T10:27:23.9054Z”
身份证号码：1
图像：“/media/filer_public/ac/0b/ac0ba5cb-4f00-4386-aa8b-984919abdf8d/logoluso.png”
名称：“卢萨图”
更新日期：“2018-04-09T08:22:52.022891Z”
类别：空
代码：“8ed96b9c”
创建于：“2017-05-02T10:28:11.951052Z”
描述：“贝利”
面料颜色编号：1
身份证号码：1
图像：“/media/filer_public/f3/59/f3596b6f-1d15-46a5-9b40-f2c275bfd65c/ancora.png”
_是否处于活动状态：true
名称：“NCORA”
更新日期：“2018-06-18T09:31:07.512569Z”
1:
{id:2，brand:{…}，category:null，is_active:true，代码：“534e44bc”，…}
]

此外，我将在这里输入文件searchBar.js中的搜索栏代码：

import React from 'react';

export class SearchBar extends React.Component {

    render() {

        return (
            <div id="SearchBar">
                <form>
                    <input type="text" placeholder="Pesquisa" />
                </form>
            </div>
        )
}

从“React”导入React；
导出类搜索栏扩展React.Component{
render（）{
返回(
)
}

}

现在是Main.js页面的代码：

import React from 'react';

export class Main extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        token: {},
        isLoaded: false,
        models: []
    };
}

componentDidMount() {

    /* Fetch's to get token */

    fetch(url + '/couch-model/', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
        }
    }).then(res => {
        if (res.ok) {
            return res.json();
        } else {
            throw Error(res.statusText);
        }
    }).then(json => {
        this.setState({
            models: json.results
        }, () => {});
    })
}


render() {

    const { isLoaded, models } = this.state;

    if (!isLoaded) {
        return (<div>Loading...</div>)
    } else {
        return (
                <div>

                    {models.map(model =>
                        <a href="/sofa" key={model.id}>
                            <div className="Parcelas">
                                <img src={"url" + model.image} className="ParcImage" alt="sofa" />
                                <h1>Sofá {model.name}</h1>

                                <button className="Botao">
                                    <p className="MostraDepois">Ver Detalhes</p>
                                    <span>+</span>
                                </button>
                                <img src="../../img/points.svg" className="Decoration" alt="points" />
                            </div>
                        </a>
                    )}

                </div>
            )
        }
    }
}

从“React”导入React；
导出类Main扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
令牌：{}，
isLoaded:false，
型号：[]
};
}
componentDidMount（）{
/*去拿令牌*/
获取（url+'/coach model/'{
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
'Authorization'：'JWT'+（JSON.parse（localStorage.getItem（'token'））.token）
}
})。然后（res=>{
如果（res.ok）{
返回res.json（）；
}否则{
抛出错误（res.statusText）；
}
})。然后（json=>{
这是我的国家({
模型：json.results
}, () => {});
})
}
render（）{
const{isLoaded，models}=this.state；
如果（！已加载）{
返回（加载…）
}否则{
返回(
{models.map（model=>
)}
)
}
}
}

我不想创建一个包含结果的新页面，我希望结果与您在Main.js返回代码中看到的结果相同，这意味着我只想限制获取的结果，我猜…

---

非常感谢您的帮助（如果没有Redux的话），谢谢

我会将搜索文本放在redux中。 您主要需要查看redux搜索文本

在这一点上，您必须使用以下内容：

const filteredSofas = search === '' ? sofas : filter(sofa => sofa.name.toLowerCase().includes(search.toLowerCase()), sofas);

您的主应用程序应该查看redux搜索，其内容如下：

const mapStateToProps = (state) => ({search: state.search});
export default compose(connect(null, mapDispatchToProps))(Main)

---

我建议您在main中使用SearchBar组件，没有理由不：）我以前从未使用过Redux，因为我正在自学React。所以基本上，我应该把代码粘贴到SearchBar.js上@IdanHenNo，要使用redux，你必须安装软件包，等等。-我的搜索栏位于NavBar上，这是另一个不同的容器。我会创建一个通用的搜索输入（我的系统中实际上有它）-并在两个位置使用搜索输入（NavBar和main）。你喜欢在没有redux的情况下这样做吗？是的，请@斯伽莱布