React中为动态生成<li>创建ref失败，current始终为null的问题排查

你这情况核心是ref的current一直是null，原因很直接：React要等组件把DOM元素渲染到页面之后，才会把对应元素赋值给ref的current属性。你现在是刚拿到数据、创建完ref就立刻打印，这时候组件还没完成重新渲染，ref自然还没被赋值。

1. 等组件渲染完再访问ref #

类组件里用componentDidUpdate钩子，等数据更新、DOM渲染完成后再查看ref：

componentDidUpdate(prevState) {
  // 只有当数据真的变化时才检查ref
  if (prevState.data !== this.state.data) {
    // 这会儿DOM已经渲染完成，ref的current就有值了
    console.log(this.singleRefs);
    // 单独查看某个ref也可以：console.log(this.singleRefs[目标id].current)
  }
}

2. 保持ref创建与渲染的正确顺序 #

你当前创建ref的逻辑没问题，但要先建好ref集合，再更新state触发组件渲染：

// 假设这是你请求数据的回调函数
fetchYourData().then(data => {
  // 先为每个数据项生成ref并存储
  const newRefs = data.reduce((acc, value) => {
    acc[value.id] = React.createRef();
    return acc;
  }, {});
  this.singleRefs = newRefs;
  
  // 再更新state，触发组件重新渲染绑定ref
  this.setState({ data });
});

渲染时正常绑定ref，必须给<li>设置唯一key（这是React要求，也能避免ref绑定混乱）：

render() {
  return (
    <ul>
      {this.state.data.map(element => (
        <li 
          key={element.id} 
          ref={this.singleRefs[element.id]}
        >
          {element.name}
        </li>
      ))}
    </ul>
  );
}

别在render的map循环里直接调用React.createRef()，不然每次渲染都会生成新的ref对象，无法稳定绑定到对应的DOM元素上。

内容的提问来源于stack exchange，提问作者Tom