我的组件正在创建TypeError:无法读取null的“单击”属性

Question

​

​

这个问题与我的Buy_Item组件有关。位于左上角的“城市服装”徽标将您带回主页。它与我的其他组件完全正常工作，除了这一个。当我点击它给我：

​

​

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Header/>
          <Route exact path="/" render = {() => <Featured/> } />

          <Route path="/items-available" render = {() => <Items_Available item_info={<Item_Info/>}/> } />

          <Route path="/buy-item" render = {() => <Buy_Item buy_item_info={<Buy_Item_Info/>}
            item_info={<Item_Info/>}/> } />

          <Footer/>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

以下是我的标头组件中的“城市服装设计师”标志的功能

        <div id="nav_logo_container">
          <Link to="/">
            <picture>
              <source media="(min-width:768px)" srcset={uo_logo} />
              <source srcset={uo_logo_smaller_screen} />
              <img id="nav_logo" src={uo_logo} alt="Urban Outfitters Logo" />
            </picture>
          </Link>
        </div>

如果有帮助的话，这是我的Github回购：info/src

Answer 1

您在Buy_Item组件中完全错了

不要在setState方法中调用render()，因为它可能导致无限循环。这是因为调用setState总是会导致重呈现，除非shouldComponentUpdate返回false。

试试这个..。

const imgDic = {
  0: item_1,
  1: item_1_alt,
  2: item_1_alt2,
  3: item_1_alt3,
  4: item_1_alt4,
  5: item_1_alt5
};

class Buy_Item extends React.Component {
  constructor(props) {
    this.state = {
      radioStatus: null,
      currentImg: item_1
    };
    this.handleRadioClick = this.handleRadioClick.bind(this);
  }

  handleRadioClick(radioId) {
    this.setState({
      radioStatus: radioId,
      currentImg: imgDic[radioId]
    });
  }

  render() {
    // the rest of render code goes here...
  }
}