将js设置状态从父组件反应到子组件 [英] react js set state from parent to child component

问题描述

所以我有一个父子组件.

父母将在搜索栏中输入的任何内容作为道具传递给孩子.

然后应该执行 api fetch，我在控制台中看到了 fetch 对象.我在从父级设置子级状态时遇到困难.

任何提示将不胜感激，谢谢你和快乐编码:D

class HelloComponent 扩展 React.Component {使成为 () {返回 <h1>Github API 存储库 </h1>;}}类父扩展 React.Component {构造函数(道具){超级(道具)；this.boo = this.boo.bind(this);this.state = {路径:''};}嘘=(事件)=>{event.preventDefault();//alert('它有效！');让 url = 'https://api.github.com/search/repositories?q='+ this.state.path;//让参数= this.state.path;控制台.log(url);

<块引用>

我尝试使用 this.props 或只是 this.response..etc

 axios.get(url).then(响应 => {控制台.log(response.data.items)这个.setState({回购:this.props.response.data.items})})}//从搜索栏设置状态searchQuery = (事件) =>{this.setState({ path : event.target.value });}使成为() {返回(//调用 Repositories 组件并将当前状态作为 props 传递
<form onSubmit={this.boo}><input type="text" onChange={this.searchQuery}/><输入类型=提交"值=搜索"/></表格><子搜索= {this.state.path}/>{/* <button onClick={this.boo}>fuck</button>*/}</div>);}}类子扩展 React.Component {构造函数(道具){超级(道具)；//this.boo = this.boo.bind(this);this.state = { repo : ''};}使成为 () {{/*常量标题 = this.state.repo.map( (repo) =><tr key={ repo.id }><td>{ repo.name }</td><td><a href={repo.html_url}>{repo.html_url}</a></td></tr>);返回 (
<桌子><身体><tr><th>名称</th><th>URL</th></tr>{标题}</tbody></表></div>);*/}返回 (<h1>{this.state.repo}</h1>);}}类 App 扩展 React.Component {使成为 () {返回 (
<你好组件/><父母/></div>);}}ReactDOM.render(<App/>, document.getElementById('root'));

解决方案

我认为首先是你的这部分代码是错误的

axios.get(url).then(响应 => {控制台.log(response.data.items)这个.setState({回购:response.data.items})})

首先你需要将 prop repo 传递给孩子

<子 repo={this.state.repo} search={this.state.path}/>

要从父级设置子级的状态，不需要对父级进行任何更改，在其中添加componentWillReceiveProps方法和setState

componentWillReceiveProps(nextProps) {这个.setState({回购:nextProps.repo})}

So I have a parent and children component.

Parent passes whatever is typed in the search bar as a prop to the children.

then the api fetch should be executed, I see the fetch object in the console. I'm having difficulties setting the children state from the parent.

Any tips would be appreciated, thank you and happing coding :D

class HelloComponent extends React.Component {
    render () {
        return <h1>Github API repositories </h1>;
     }
}

class Parent extends React.Component {
    constructor (props) {
        super (props);
        this.boo = this.boo.bind(this);
        this.state = {path: ''};

    }

    boo = (event) => {
        event.preventDefault();
        //alert('it works!');
        let url = 'https://api.github.com/search/repositories?q='+ this.state.path;
        //let parameter = this.state.path;
        console.log(url);

I tried using this.props or just this.response..etc

        axios.get(url)
            .then(response => { 
                console.log(response.data.items)
                this.setState({
                    repo : this.props.response.data.items
                })
            })
    }
    //set the state from the search bar
    searchQuery = (event) => {
        this.setState({ path : event.target.value });
    }


    render() {
        return(
            //call Repositories component and pass the current state as props
            <div>

                <form onSubmit={this.boo}>
                <input type="text" onChange={this.searchQuery}  />
                <input type="submit" value="Search"/>
                </form> 
                <Child search= {this.state.path} />

                {/* <button onClick={this.boo}>fuck</button> */}
            </div>          
        );
    }
}

class Child extends React.Component {
    constructor (props) {
        super (props);
        //this.boo = this.boo.bind(this);
        this.state = { repo : ''};
    }

    render () {
    {/* 
        const titles = this.state.repo.map( (repo) => 
            <tr key={ repo.id }>
            <td> { repo.name }</td>
            <td><a href={repo.html_url}>{repo.html_url}</a></td>
            </tr>
            );


        return (
            <div>
                <table>
                    <tbody>
                        <tr><th>Name</th><th>URL</th></tr>
                        {titles}
                    </tbody>
                </table>    
            </div>
        );
    */}
        return (
            <h1>{this.state.repo}</h1>
        );

    }
}


class App extends React.Component {
    render () {
        return (
        <div>
            <HelloComponent />
            <Parent />
        </div>
        );              
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

解决方案

I think first is this part of your code is wrong

axios.get(url)
            .then(response => { 
                console.log(response.data.items)
                this.setState({
                    repo : response.data.items
                })
            })

First you need to pass prop repo to child

<Child repo={this.state.repo} search= {this.state.path} />

To set state of child from parent, you don't need to make any change in parent, Add componentWillReceiveProps method in and setState there

componentWillReceiveProps(nextProps) {
  this.setState({
   repo: nextProps.repo
  })

}

这篇关于将js设置状态从父组件反应到子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！