小编Aje*_*hah的帖子

如何使用下面没有和属性的 JSON 数据填充反应选择中的选项？valuelabel

[       
    {
        "sortCode": "55-77-42",
        "accountNumber": "08488234",
        "accountType": "Savings Account",
        "accountName": "Mannuel Sam"
    },
    {
        "sortCode": "12-43-98",
        "accountNumber": "12365432",
        "accountType": "Savings Account",
        "accountName": "John Cena"
    },
    {
        "sortCode": "87-20-51",
        "accountNumber": "76491234",
        "accountType": "Savings Account",
        "accountName": "Shweta Pandey"
    },
    {
        "sortCode": "56-73-39",
        "accountNumber": "09865479",
        "accountType": "Savings Account",
        "accountName": "Prerna Singh"
    }
]

我正在使用 javascript ( window.location.href= uri + base64(tableData))将 html 表导出为 excel，这对于 1500 行工作正常。因为window.location.href有一些限制字符串长度。但我需要导出 40000 行。

我也尝试过使用锚标签 href。但它也不起作用。

那么我们可以将数据部分分配给window.location.href或有任何替代解决方案吗？

我正在创建一个文件输入来选择可以预先可视化的多个图像。

为了处理多个图像，我将它们放入组件状态的数组中，并映射预可视化图像。

但是，当我从输入中选择图像并使用 设置状态时this.setState({imgArray: newArray})，this.state.array.map(image=><img src={image}/>)不会重新渲染所选图像。

代码：

export default class posts extends Component {
  state = {
    fotos: ["/iconos/img.svg"] // If there are not img selected, it renders one image icon
  }

  onUploadVarious = e => {
    let newArray = []
    Object.values(e.target.files).map(file => {
      let nuevo = new FileReader()
      nuevo.onload = event=> newArray.push(event.target.result)
      nuevo.readAsDataURL(file)}
    )
    this.setState({fotos: newArray}) // the state is set correctly
  }
}

使成为：

<div className=" border rounded" style={{"height":"30%", "overflow":"auto"}}>
    {this.state.fotos.map(foto =>
      <img src={foto||"/iconos/img.svg"} …

我在尝试 React 组件时遇到了这个问题。我有一个组件：

window.renderCount=1;

export function Soundscapes() {

    const soundscape = useSelector((s) => s.tasks.soundscape);
    const dispatch = useDispatch();
   
    const [soundscapeAudioElement, setSoundscapeAudioElement] = useState(undefined);
    useEffect(()=>{
        console.log('state just changed to: ', soundscapeAudioElement )
    },[soundscapeAudioElement])

    
    console.log(window.renderCount);
    window.renderCount=window.renderCount+1;

    return (<SomeJSXUnrelatedToQuestion/>)
}

在控制台中，我注意到日志正在1,3,5,7,9随后重新渲染。renderCount我希望它每次在屏幕上增加 1 时都会打印出来1,2,3,4,5，就像每次组件渲染到屏幕上一样。但它似乎在增加它，但不是每次都将其打印到控制台。

我在这里错过了什么吗？

在外面柜台在很多的YouTube视频教程看到的例子，什么是实用/现实世界中使用案例useMemo和useCallback？

另外，我只看到了钩子的输入焦点示例useRef。

请分享您为这些钩子找到的其他用例。

我拥有的

我正在尝试创建一个验证输入强度的密码字段，在另一个答案中我发现regex我可以使用它来验证输入是否满足特定条件，这种方法的问题是它只为每个输入抛出一条错误消息的验证。

password: yup
    .string()
    .required('Please Enter your password')
    .matches(
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
      "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
    ),

我想要的是

我想要的是验证用户输入的每个字符，并在满足每个条件时抛出特定错误，例如，如果用户输入缺少小写字母，它应该抛出错误“必须有小写字母”，如果输入缺少数字，它应该抛出数字“必须有数字”等等。我尝试过使用 match 但这不起作用：

password: yup
    .string()
    .required('Please Enter your password')
    .matches(/^[a-z]+$/, 'One lowercase character')
    .matches(/^[A-Z]+$/, 'One uppercase character')
    .matches(/^\d+$/, 'One number')
    // ... other validation

我正在React中制作一个切换组件，并使用LARAVEL.

当我发送切换状态时，在数据库中它被注册为 1 或 0，但是当我激活/禁用切换时，它会显示&console.log的值。truefalse

这里的问题是，当我将值发送到数据库并且我想获取它时，切换器无法识别 0 和 1，因为我正在为if trueor编写条件false，所以我无法读取在db 分别为 0/1。

有没有关于如何将接收到的布尔值转换为 true/false 的解决方案？

钩子和处理程序：

const [showlogo, setshowlogo] = useState('');

const HideLogo = () => {
    setshowlogo(!showlogo);
    console.log(showlogo)        
  }

切换代码：

 <div onClick={HideLogo} >Toggle</div>
 <div className={`${ showlogo ? "on" : "off"   }`}>Valeur of logo</div>