首页 文章

React组件不呈现来自父级的道具

提问于
浏览 次
5
class CyInfo extends Component {

    foo(){
        console.log(this.props.id);
        return getAttributes(this.props.id)
    }

    render() {
        return ( <Info data = {this.foo()}> </Info>)
    }
}

此父级接收“props.id”并将数据值传递给getAttributes（）返回的子级 .

export default class Info extends Component {
    constructor(props){
        super(props)
    }

    /*componentWillReceiveProps(nextProps){
        console.log(nextProps);
    */

    render() {
        console.log(this.props.data);
        return (
            <div id="info">{this.props.data}</div>
        )
    }
}

在孩子上我可以在控制台和componentWillReceiveProps中看到道具值 . 但是数组不能渲染 . 我尝试使用react-devtool . 在react-devtool道具似乎传递了孩子而不是渲染 . 有趣的是，当我更改数组的某些元素数组时，react-devtool正在渲染 .

我做错了什么 .

编辑：[React-Devtool截图] [1]

我编辑了react-devtool截图 . 似乎道具，但组件只呈现初始值 . 在屏幕截图控制台错误是favicon只是忽略这一点

EDIT2：Console prints props array

编辑3：JSON.stringify(this.props.data)

javascript reactjs react-jsx

3 回答

  • 0

    道具来自函数（getattributes），它调用异步的方法，当这个道具传递给孩子时，没有渲染 . 我直接在父子中调用async方法，并在componentWillReceiveProps中使用回调设置状态：

    componentWillReceiveProps(nextProps){
    self = this;
    AsyncFunc(nextProps.id ,(error, result) => {
        self.setState({data:result})
    });
}

    和渲染

    return (<div id="info">
        {Array.isArray(this.state.data) && this.state.data.map((data) => {
            return <div key={data._id}>{data.class}{data.predicate}{data.yuklem}</div>
        })}</div>
    )
    回复于
  • 0

    由于 foo 是一个函数，您必须传递给子组件：

    return ( <Info data = {() => this.foo()}> </Info>)

    此外， data 是 array ，您必须使用.map()进行渲染，如下所示：

    export default class Info extends Component {
    constructor(props){
        super(props)
    }

    /*componentWillReceiveProps(nextProps){
        console.log(nextProps);
    */

    render() {
        console.log(this.props.data);
        return (
           <div id="info">{this.props.data.map(( element, index ) => {
            console.log(element);
            <span key={index}> {element}</span>})}
           </div>
        )
    }
}
    回复于
  • 1

    正如您所提到的那样 this.data.props 返回一个数组，并且为了渲染数组中的元素，您需要映射数组元素并检查在初始渲染之前 data is an array or not 可能不可用或者不是数组

    export default class Info extends Component {
    constructor(props){
        super(props)
    }

    /*componentWillReceiveProps(nextProps){
        console.log(nextProps);
    */

    render() {
        console.log(this.props.data);
        return (
            <div id="info">
               {this.props.data && Array.isArray(this.props.data) && this.props.data.map((data, index) => {
                      return <div key={index}>{data}</div>
               })}</div>
        )
    }
}
    回复于

相关问题