Question

我找到了解决当前问题的方法，但想了解为什么会发生这种情况或更好的解决方案。

我将 7 个道具传递给子组件。在第一次渲染时，所有道具都出现在控制台中。在第二次渲染中，缺少 3 个道具。这导致我的模块出错，说它找不到不存在的东西。

这是我目前使用 JSX 的解决方案。验证道具是否存在。如果是，请查看 props.data 是否存在。如果是，请显示内容。

我原来的理论是什么都不会显示。然而， this.props.data[this.props.cardIndex].character 确实显示了我想要的。任何帮助理解这一点将不胜感激！

工作代码：

render() {
        /* Variables that will allow the card background to change based off the props passed for the input received during flashcards and quiz. */
        let bgColor = "card-body "
        if( this.props.outcome === null ){
            /* Background color class will remain empty or return to neutral. */
        } else if ( this.props.outcome ) {
            /* Background color for card when correct input is registered */
            bgColor+= "bg-success "
        } else {
            /* Background color for card when incorrect input is registered */
            bgColor+= "bg-warning "
        };

        log("Card has rendered");
        console.log("props: ", this.props);

        // Below will error if used
        // let data= this.props.data[0];
        // console.log(data);
        return (
            <>
            {this.props ? (
                <>
                {this.props.data ? (
                    <>
                    <div className="card text-center">
                        <div className={bgColor}>
                            <h5 className="card-title">{this.props.data[this.props.cardIndex].character}</h5>
                            <input onChange={this.handleOnChange} name="guessInput" type="text" value={this.props.guessInput} />
                            {/* {this.props.show ? (
                                <>
                                </>
                            ):(
                                <>
                                </>
                            )} */}
                        </div>
                    </div>
                    </>
                ):(
                    <>
                    </>
                )}
                </>
            ):(
                <>
                </>
            )}
            </>
        );
    };

控制台日志：

Card has rendered

index.js:51 props:  {guessInput: Array(0), data: Array(49), cardIndex: 0, translation: Array(49), handleChange: ƒ, …}cardIndex: 0data: (49) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
guessInput: []
handleChange: ƒ ()
outcome: null
start: true
translation: (49) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
__proto__: Object

index.js:2 Card has rendered

index.js:51 props:  {guessInput: Array(0), start: true, outcome: null, handleChange: ƒ}
guessInput: []
handleChange: ƒ ()
outcome: null
start: true
__proto__: Object

Review.js:27 Review componentDidUpdate

Answer 1

您不需要进行所有这些检查。您需要做的就是以这样的安全方式解构变量：

  const { data } = this.props || {};
  const { show } = data || {};

  return <div>{show}</div>;

使用这种方式，您是说：如果未提供数据，则默认值为 {}。同样，如果未提供 show，则默认值为 {}。

重新渲染后子组件无法读取道具

1 个答案: