Reactjs

Question

我在反应中有以下代码将道具从无状态组件传递到全状态组件，我在运行时得到 TypeError。但是，当我使用同名道具时，错误消失了！提前感谢您的帮助

    import React, { Component } from 'react';
    class App extends Component {
        state = {
           title:'xxxxxxx', 
           show:true,
           SampleData:[object, object]
        }
      render() {

    const {SampleData} = this.state.SampleData
        return (
          <div>
    <SampleStateless list = {SampleData}/>
          </div>
        );
      }
    }

    export default App;




const SampleStateless = (props) => {
  const {list} = props
  return (
    <div>
       <SampleStatefullComponent secondlist = {list}    />
    </div>
  );
}


class SampleStatefullComponent extends Component {
  state = {
    something:''
  }

  render () {
    const {secondlist} = this.props
    console.log(secondlist);
    // I get data correctly in console

    const items = secondlist.map (item => return {some js}) 
    //TypeError: secondlist is undefined
    return (
      <div>
        {items}
      </div>
    )
 }
}

Answer 1

您正在对字符串进行映射，但映射仅适用于数组。查看更正后的代码

也应该是

const {SampleData} = this.state;

但不是

const {SampleData} = this.state.SampleData;

更新代码

import React, { Component } from 'react';
        class App extends Component {
            state = {
               title:'xxxxxxx', 
               show:true,
               SampleData:[{'id': "01", "name": "abc"}, {'id': "02", "name": "xyz"}]
            }
          render() {

        const {SampleData} = this.state;
            return (
              <div>
        <SampleStateless list = {SampleData}/>
              </div>
            );
          }
        }

        export default App;




    const SampleStateless = (props) => {
      const {list} = props
      return (
        <div>
           <SampleStatefullComponent secondlist = {list}    />
        </div>
      );
    }


    class SampleStatefullComponent extends Component {
      state = {
        something:''
      }

      render () {
        const {secondlist} = this.props
        console.log(secondlist);
        // I get data correctly in console

           const items  = {secondlist && secondlist.map (item => item.name)}

        return (
          <div>
            {items}
          </div>
        )
     }
    }

Reactjs - Props Is Lost While Using It In A Child Component TypeError:

Reactjs - Props Is Lost While Using It In A Child Component TypeError:

react-props