如何在 react-redux 组件上传递道具？

Question

我的应用程序中未定义道具会引发未定义的错误。 一旦定义了 state，它就不会使用新的道具重新渲染组件。

  render(){
    // console.log("RENDER PROPS", this.props)
    const  { name, category, price, img} = this.props

    return(
      <div>
        <h2>={name}/>
        <h4>{category}/>
        <h3>{price}</>
        <img={img}/>
      </div>
    )
  }
}

Answer 1

您应该在组件的内部 state 中保存道具，请参见示例。

export default function Page({ nameFromProps , ageFromProps }) => {
    const [name , setName] = useState(nameFromProps );
    const [age, setAge] = useState(ageFromProps );
   useEffect(() => {
      setName(nameFromProps);
      setAge(ageFromProps);
   },[nameFromProps]);
  return (<div> Data : {name}{age} </div>)
}

Answer 2

不是很清楚你是如何将 props 传递给组件的，可能这一步有错误，但是为了检查你可以使用

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

检查您的道具价值并强制重新渲染