相关疑难解决方法(0)

p标签中key属性的功能是什么？我检查了dom,我希望看到taco列表中每个元素的p标签<p taco-1>,但它只是<p>.任何解释将非常感激.

{this.props.tacos.map( ( taco, i ) => {
    return <p key={ `taco-${ i }` }>{ taco }</p>;
})}

我正在调用一个 API 端点，将其数据保存到一个状态，然后渲染它。它显示在浏览器中，但控制台上有警告：Warning: Each child in a list should have a unique "key" prop.。

我的app.js：

class App extends Component {
  render () {
    return (
      <div>
        <Profile profiles={this.state.profile} />
      </div>
   )
  }
  state = {
    profile: []
  };

  componentDidMount() {
    fetch('http://127.0.0.1:8000/profiles')
    .then(res => res.json())
    .then((data) => {
      this.setState({ profile : data })
    })
    .catch(console.log)
  }
}
export default App;

我不明白将key prop放在render() 中的哪里。这是我的片段profile.js：

const Profile = ({ profiles }) => {
  return ( …

我收到了警告 Each child in an array or iterator should have a unique "key" prop. Check the render method of Login

我想要传回一个元素数组,而不使用键.我不得不相信这有一个解决方法,而不添加一个毫无意义的包装器？

请注意 return [<div/>, <div/>];

  render () {
    return (
      <div className='login'>
        {this.mobileWeb()}
        {this.pcWeb()}
      </div>
    );
  }

  mobileWeb () {
    if (this.state.isMobileWeb === true) {
      return [
        <div className='sky-container'></div>,
        <div className='sea-container'></div>
      ];
    }
  }

  pcWeb () {
    if (this.state.isMobileWeb !== true) {
      return [
        <div className='sky-container'></div>,
        <div className='sea-container'>
          <LoginForm onChange={this.onChange} ref='loginForm' onEmailChange={this.onEmailChange} onPasswordChange={this.onPasswordChange} />
          <input type='submit' value='Submit' onClick={this.login} />
        </div> …

我有一个数组。我正在使用地图来显示它React。React 抛出有关键的错误，我不知道为什么。有什么想法为什么会React抛出这个错误吗？

{
    this.state.buttons.map((button, index) => {
       return (
       <>
         {index % 4 === 0 && (
           <div key={`break-${index}`} className="w-100" />
         )}
         <Button key={index} char={button} click={this.pushString} />
       </>
     )
})}

我是使用 React 的 Typscript 新手，我在 Google 控制台 Inspect 元素上收到此错误消息。我检查了很多帖子，但无法理解这里出了什么问题。有人可以帮助纠正我的代码中的错误吗？

index.js:1 警告：列表中的每个子项都应该有一个唯一的“key”属性。

检查 的渲染方法PostList。看

in div (at PostList.tsx:19)
in PostList (at pages/index.tsx:25)
in div (at pages/index.tsx:21)
in IndexPage (at App.tsx:68)
in component (created by Context.Consumer)
in Route (at App.tsx:65)
in div (at App.tsx:64)
in div (at App.tsx:85)
in Router (created by BrowserRouter)
in BrowserRouter (at App.tsx:84)
in App (at src/index.tsx:8)

Run Code Online (Sandbox Code Playgroud)

 export default class PostList extends React.Component <Props, Post>{
 renderPosts(){
    const posts=Object.values (this.props.posts);
    return posts.map((n)=> <div>
         <h2> <Link to= {`/posts/${n._id}`}> …

我在react-hook-form 这里使用了一个嵌套的字段数组设置。请注意，我的实际代码有点复杂，但这里显示的问题完全相同。

我遇到的问题是，如果我删除列表中的一个项目，比如ID: 2在 list 中[{ID:1}, {ID:2}, {ID:3}]，结果不是[{ID:1}, {ID:3}]，而是[{ID:1}, {ID:2}].

这是官方示例，它正确获取嵌套字段数组。

据我所知，唯一的区别是我的表单依赖于从 API 检索的数据（在我的示例中，由async函数处理），而官方示例使用已经启动的数据。

查看在线示例，有些人利用了该<Controller>领域，但这只是给我带来了更多问题（在我的实际代码中），并且在测试时（在代码沙盒中），并没有真正改变删除 2 不会改变整个阵列起来。

有什么我想念的吗？

我有许多从数组动态生成的字段，并绑定到 redux 状态分支。输入值正确映射到状态，然后返回到组件。问题是它失去焦点，您必须重新单击输入元素。我试图通过自动聚焦最后更新的字段来解决这个问题，但它聚焦在文本的开头，这样你就可以向后写。我寻找该问题的解决方案，但它们都需要直接在 dom 上工作或使用“onFocus =“this.value = value”，作为 jsx 属性将不起作用。

我在这里做错了什么吗？为什么 React 不像静态 jsx 输入元素那样自动记住要聚焦的字段？

这是生成字段的代码：

const renderFields = (fields, target) => {
    if(!fields) return <div></div>
    return fields.map(field => {
      let input = []
      if(field.type==="text") {
        input.push(<input key={generateUID()} type="text" onChange={e=>onChange(field, e.target.value, target)} autoFocus={field.hasFocus} value={field.value} />)
      } else if(field.type==="radio") {
        let values = field.control.match(/\[(.+)\]/)[1].split(",")
        input = values.map(value => {
          return (<label key={generateUID()}><input name={field.id} onChange={e=>onChange(field, value, target)} type="radio" value={value} key={generateUID()} style={{display: "inline-block"}} /> {value}</label>)
        })
      }
      return (
        <div key={generateUID()}>
          <label>{field.label}</label>
          <br …

React 中按键的意义是什么？我读到在循环中使用索引并不是键的最佳解决方案。为什么？

我有一个警告：数组或迭代器中的每个孩子都应该有一个唯一的“键”道具。但是我用了钥匙。这是我的代码：

return (
  <li onClick={this.handleOnMarkAsCompleted} key={Date.now()}>
    { completed ? <b>{value}</b> : value }
  </li>
)

有任何想法吗？为什么会发生？

我有很多天，我正在映射这些天，View但我收到警告Warning: Each child in a list should have a unique "key" prop.，我无法理解为什么会出现此错误。我是原生反应新手，我试图理解每个警告的含义

我的代码：

<ScrollView
  horizontal={true}
  showsHorizontalScrollIndicator={false}
  contentContainerStyle={styles.horizontalView}>
  {weekArray.map((item, index) => (
    <TouchableOpacity index={index} onPress={() => setIndexSelect(index)}>
      <Text
        style={{
          fontFamily: "Raleway-Regular",
          fontSize: SizeConfig.blockHeight * 2.1,
          color: indexSelect === index ? COLORS.blackDark : COLORS.blackLight,
        }}>
        {index === weekArray.length - 1 ? ` ${item.day} ` : ` ${item.day} | `}
      </Text>
    </TouchableOpacity>
  ))}
</ScrollView>;