Javascript 将变量移动到第二个组件并保存到状态

来自组件

App

的变量

result

将被传输到组件

ItemDetails

并分配给变量

scores

。我收到一个错误：

无法读取未定义的属性“resl”

代码如下：

应用程序

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      resul:[],
      items: [
        {
          name: 'A',
          description: 'Hello'
        },
        {
          name: 'B',
          description: 'World'
        }
      ],
      selectIndex: null
    };
  }

  select = (index) => {
    this.setState({
      selectIndex: index
    })
  }

  componentDidMount() {
     axios({
            url: "https://jsonplaceholder.typicode.com/todos",
            method: "GET"
        })
        .then(response => {
            this.setState({
              resul: response.data
            });
        })
        .catch(error => {
            console.log("User not enrolled.", error);
        })
  }


  render() {
    console.log(this.state.selectIndex)
    return (
      <div>
        <ul>
          {
            this.state.items
              .map((item, index) =>
                <Item
                  key={index}
                  index={index}
                  item={item}
                  select={this.select}
                  items = {this.state.items}
                  selectIndex = {this.state.selectIndex}
                />
              )
          }
        </ul>
         <ItemDetails
            items = {this.state.items}
            selectIndex = {this.state.selectIndex}
            resul={this.state.resul}
          />
      </div>
    );
  }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
结果：[]，
项目：[
{
名称：‘A’，
描述：“你好”
},
{
名称：‘B’，
描述：“世界”
}
],
selectIndex:null
};
}
选择=（索引）=>{
这是我的国家({
选择索引：索引
})
}
componentDidMount（）{
axios({
url:“https://jsonplaceholder.typicode.com/todos",
方法：“获取”
})
。然后（响应=>{
这是我的国家({
结果：response.data
});
})
.catch（错误=>{
日志（“用户未注册”，错误）；
})
}
render（）{
console.log（this.state.selectIndex）
返回(

{
此.state.items
.map（（项目、索引）=>
)
}

);
}
}

项目详细信息

class ItemDetails extends Component {
  constructor(){
    super();

    const scores = this.props.resul;

    this.state= {
      scores
    }
  }

  render() {
    const selectItem = this.props.items[this.props.selectIndex]

    return (  
      <div>
        {selectItem ?
          <div>
            <p>
                Description:{selectItem.description}
            </p>
            <Stopwatch />
          </div>
          :

          null
        }
      </div>
    )
  }
}

类ItemDetails扩展组件{
构造函数（）{
超级（）；
const scores=this.props.resu；
此。状态={
分数
}
}
render（）{
const selectItem=this.props.items[this.props.selectIndex]
报税表（
{selectItem？

描述：{selectItem.Description}

:
无效的
}
)
}
}

这是因为当组件第一次呈现时，构造函数是第一个被调用的构造函数。这意味着组件尚未收到您可能已通过的道具。改用生命周期方法。此外，直接使用道具设置状态被认为是不好的做法。像

componentdiddupdate

这样的生命周期方法将为您完成这项工作

将代码更新为以下内容：

编辑：

项目详细信息：

class ItemDetails extends Component {
  constructor(){
    super();

    this.state= {
      scores: []
    }
  }

  componentDidUpdate(prevProps) {
     if(prevProps.result !== this.props.result) {
        this.setState({ scores: this.props.result })
     }
  }

  render() {
    const selectItem = this.props.items[this.props.selectIndex]

    return (  
      <div>
        {selectItem ?
          <div>
            <p>
                Description:{selectItem.description}
            </p>
            <Stopwatch />
          </div>
          :

          null
        }
      </div>
    )
  }
}

类ItemDetails扩展组件{
构造函数（）{
超级（）；
此。状态={
分数：[]
}
}
componentDidUpdate（prevProps）{
if（prevProps.result！==此.props.result）{
this.setState（{scores:this.props.result}）
}
}
render（）{
const selectItem=this.props.items[this.props.selectIndex]
报税表（
{selectItem？

描述：{selectItem.Description}

:
无效的
}
)
}
}

---

注意新的生命周期方法和检查。仅在更新父道具时更新子状态将提高应用程序的效率。

console.log（this.state.scores）

始终显示

null

删除if块检查，然后重试。如果它不起作用，请描述其行为，并尽可能与我们共享一个代码沙盒。创造你的闪电战。你救不了我的stackblitz，它在我这边起作用。现在检查：