m0_62452255 2022-04-22 12:01 采纳率: 85.7%
浏览 104
已结题

关于react父子组件传值遇到的问题!(语言-javascript)

import React, { useState} from 'react'
// document.getElementById('button1').addEventListener('click',Fa);
function Fa() {

  const search = () => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then(data => {
        console.log(data);

        let output = 'name';
        //forEach数组遍历
        data.forEach((user) => {
          output += `<li>${user.name}</li>`;
        })
        //请求后数据赋给变量
        document.getElementById('output').innerHTML = output;
      })
      //使用 catch() 去捕获错误
      .catch(err => console.log(err));
  }




  const [count, setCount] = useState(0)
  return (<div id="">
    <p>父组件中的count :{count}</p>
    <button id="output"
      onClick={() => {
        setCount(count + 1)
        search()
      }}
    >
      获取信息
    </button>
    <Son value={count} />
  </div>)
}

function Son(props) {

  //setCount,子组件没有状态,数组里return方法

  return (
    <div>
      <p>子组件中的count :{props.value}</p>

    </div>
  )
}

export { Fa, Son }

我的解答思路和尝试过的方法

我想在子组件内实现数组遍历,通过父组件请求回的数据,在子组件内实现功能

我想要达到的结果

父子组件传值。
1.子组件内部存在状态a,a由父组件进行赋值
2.在父组件对a进行更新
3.子组件内部a也要发生变化
4.通过fetch请求
5.请求后的数据赋给变量,通过数组方法进行遍历
6.形成展示name字段的列表
7.点击子组件的按钮,将name字段改为username
8.父组件新增一个筛选按钮,点击筛选按钮后,将name或username字段进行随机排序

  • 写回答

1条回答 默认 最新

  • iMingzhen 2022-04-22 12:42
    关注
    1. 需求比较多 可以提供思路
    2. 可以使用useState创建一个数组list,在fetch拿到后setState,并且将list传递给子组件
    3. 不要使用innerHTML来修改dom,在子组件内使用{props.list.map((item,index)=><li key={index}>{item}</item>)}的形式遍历数据
    4. 关于子组件也要操作这个list,为了清晰数据流,我们子组件不直接修改list,而是让父组件创建一个randomList函数,copy旧list并修改,得到新list后再setState,这样子组件接收到的值也会更新
    5. 筛选按钮同上

    关于第四点补充下,子组件不仅能接收数据,也能接收函数。
    所以处理数据的函数可以放在父组件,然后把该函数传递给子组件 <Son value={count} list={list} randomList={randomList} />,然后子组件直接调用,比如props.randomList()
    这样数据流会更清晰,因为数据来源于父组件,所以也应当由父组件操作,但子组件可以通知父组件操作。

    如有帮助请采纳回答~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 4月26日
  • 已采纳回答 4月22日
  • 创建了问题 4月22日

悬赏问题

  • ¥15 ubuntu20.04怎么安装yolov5(已经安装anaconda)
  • ¥15 TinyMCE如何去掉自动弹出的“链接…”工具?
  • ¥15 微信支付转账凭证,如何解决
  • ¥15 在win10下使用指纹登录时,界面上的文字最后一个字产生换行现象
  • ¥20 使用AT89C51微控制器和MAX7219驱动器来实现0到99秒的秒表计数,有开始和暂停以及复位功能,下面有仿真图,请根据仿真图来设计c语言程序
  • ¥15 51单片机 双路ad同步采样
  • ¥15 使用xdocreport 生成word
  • ¥15 请教怎么用MATLAB求坐标
  • ¥15 gradle整合es,在创建索引时报错
  • ¥15 装了几千台服务器从来没遇到这种问题,哎看下哪位帮我解决吧